Flexbox, with the axes named
Most flexbox confusion is one thing: justify-content works along the main axis and align-items across it — and flex-direction decides which is which.
Flexbox, with the axes named
Most flexbox confusion is one thing: justify-content works along the main axis and align-items across it — and flex-direction decides which is which.
Per-item properties
Which axis is which
The main axis runs in the direction of flex-direction. The cross axis is perpendicular to it.
justify-content distributes along the main axis. align-items aligns across the cross axis. align-content only does anything when there is more than one line, which means flex-wrap must not be nowrap.
Switching to column swaps them: justify-content now moves things vertically. That single fact accounts for most of the confusion.
align-content: normal is silently ignored on a single line. This page says when a property you have set is having no effect.
flex-basis, not width
flex: 1 is shorthand for 1 1 0%: grow, shrink, and start from zero. That last part is why items with different content still come out the same width, which is usually what people want and rarely what they expect.
flex: auto is 1 1 auto — start from the content's own size, then share the remaining space. Different behaviour, one character apart.
gap replaced the margin trick
Negative margins on the container and margins on each child is no longer necessary. gap is supported everywhere that matters and does not interact with the container's padding.