Alignment, Wrapping, and Growth

The four properties that do the work.

justify-content distributes space along the main axis: flex-start, center, flex-end, space-between, space-around.

align-items positions items on the cross axis: stretch (the default), center, flex-start, flex-end.

gap puts space between items without margins fighting each other.

flex-wrap: wrap lets items drop onto a new line instead of squashing.

✦ gap replaced a genuinely annoying problem

Before gap, spacing flex items meant margin-right on every child then a rule removing it from the last one. gap applies space only between items, never on the outside edges, which is what you actually wanted the whole time.

Growth and shrink. flex: 1 on an item means take an equal share of the leftover space. flex: 2 takes twice as much as flex: 1. This is how you build a sidebar that stays fixed while the main column absorbs whatever is left.