Flexbox

A row, declared

Blocks stack by default, each taking the full width. display: flex on a parent turns its children into a row — and that is the whole trick: the container decides the direction, the children just line up.

From there, three properties cover most layouts. flex-direction: column stacks them instead. justify-content spreads them along the row — space-between pushes the first and last to the edges. align-items: center lines them up across it, which is what finally removes the old vertical-align guesswork.

Turning on flex changes more than direction. The children stop being ordinary blocks: their margins no longer collapse, their widths become a starting point rather than a rule, and they stretch to the height of the tallest item by default. That last default is why a row of cards with different amounts of text ends up the same height without any extra rule.

A toolbar in three lines

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Gap, not margins

Before gap, spacing a row meant margins on the children and a rule to remove the last one. gap says the distance between items once, and the ends stay flush — which is exactly what a row of buttons wants.

Gap works in flexbox, where it was added later, and in grid, where it was there from the start. Either way it is the spacing that belongs to the container rather than to each child.

Growing and shrinking

Children can be told how to share the space: flex: 1 on one of them takes what is left over after the others have their size. That is how a search field fills the gap between a logo and a button, and how a card’s foot keeps its button at one end.

Reach for flexbox when the layout is a line — a navbar, a button row, a card where one part grows. When it is a true two-dimensional grid, reach for grid instead.

The flex shorthand, spelled out

flex: 1 is shorthand for three properties: flex-grow, flex-shrink and flex-basis. The first says how much of the leftover space this item should take, the second says whether it may shrink when space is short, and the third is the size it starts from before either happens. flex: 1 means “start at zero, grow into the spare space, and shrink if you must”, which is why it fills a row so reliably.

The long form is worth knowing because the shorthand can surprise you. flex: 1 sets the basis to 0, not auto, so an item with a long word still has that word as its minimum unless you lower it with min-width: 0. And flex: none means “do not grow, do not shrink, use my size” — the right choice for an icon that should keep its dimensions while the field beside it takes the room.

Two axes, two sets of properties

A flex container has a main axis and a cross axis. flex-direction: row makes the main axis horizontal; column makes it vertical. justify-content always works along the main axis, and align-items always works across it — so switching direction swaps what each property does.

That is why justify-content: center centres a row but does not centre a column’s height in the way people expect. Decide the direction first, then read the properties as “along” and “across”, and the layout stops being a memory test.

Wrapping and the minimum size

A flex row does not wrap unless you say flex-wrap: wrap. Without it, the children shrink until they cannot, and then they overflow the container. With it, the row breaks into lines and align-content starts to matter for the space between those lines.

The shrink floor is the trap. A flex item’s automatic minimum is its content, so a long word or an input refuses to get narrower than its text no matter what flex-shrink says. min-width: 0 on the item — or overflow-wrap: anywhere — lets it give way.

Try these next

• Make a card a flex column with the button pushed to the bottom, first with margin-top: auto, then with a growing body.
• Put a long URL in a flex child and fix the overflow with min-width: 0.
• Change flex-wrap on a row of tags and compare the two layouts at a narrow width.