CSS Flexbox

What you'll learn

• When flexbox is the right tool — and when grid is
• A mental model for main and cross axes
• Every alignment property and what it actually does
• How flex-grow, shrink, and basis interact
• Wrapping items across multiple lines
• Common pitfalls and how to debug them

1. 01
   What flexbox solves

   The 2003 layout pain that flexbox was designed to fix.
   8 min
2. 02
   The flex container

   Turning any element into a flex parent. The one property that does it.
   10 min
3. 03
   Main axis and cross axis

   The mental model that makes every other property obvious.
   11 min
4. 04
   justify-content in depth

   Spacing items along the main axis. Six values, when to use which.
   14 min
5. 05
   align-items and align-self

   Cross-axis alignment, in-group and per-item.
   12 min
6. 06
   flex-grow, shrink, and basis

   The shorthand and the long form. What flex: 1 actually means.
   18 min
7. 07
   Wrapping and gap

   Multi-line flex. The modern gap property, not margins.
   11 min
8. 08
   When to reach for grid instead

   Honest tradeoffs. Grid is not flexbox's enemy.
   11 min