Flexbox

Flexbox lays things out in one direction ~ a row or a column. It’s the right tool for a navigation bar, a row of cards, a form field with a button next to it.

It starts on the parent

.row {
	display: flex;
	gap: 8px;
}

That one line makes every direct child a flex item. You don’t write anything on the children.

The two axes

• justify-content ~ distributes items along the direction of the flow.
• align-items ~ lines items up across it.

flex-direction: column swaps which axis is which. This is the single most confusing thing about Flexbox and it catches everybody, repeatedly. When it feels backwards, that’s why.

Vertical centring, finally

display: flex;
align-items: center;
justify-content: center;

This used to be a running joke about how hard it was. Now it’s three lines.

Sizing the children

flex: 1 on a child means “take the leftover space”. Put it on one item and it expands while the others keep their natural size. Put it on all of them and they share equally.

flex-wrap: wrap lets items drop onto a new line when there isn’t room, which combined with flex: 1 1 200px gives you a responsive card grid with no media queries at all.

Flexbox or Grid?

One direction: Flexbox. Rows and columns at once: Grid. That’s genuinely the whole rule.