Two axes
Flexbox lays items along a main axis set by flex direction, and a perpendicular cross axis. Most confusion comes from mixing up which property controls which axis.
- justify content distributes space along the main axis: start, center, space between, space around, space evenly.
- align items positions items along the cross axis: start, center, stretch, baseline.
- align self overrides align items for a single item.
- align content spaces multiple wrapped lines along the cross axis, and only matters when content wraps.
Sizing the items
Each item has three growth controls.
- flex grow: share of leftover free space an item claims.
- flex shrink: how much an item gives up when space is tight.
- flex basis: the starting size before growing or shrinking.
The shorthand flex 1 means grow 1, shrink 1, basis 0, so items share space equally regardless of content.
Key idea
justify content moves items along the main axis and align items along the cross axis, with flex grow shrink basis deciding each item size.