Flexbox generator

How it works

Flexbox is not complicated, but one thing about it catches nearly everyone: justify-content and align-items do not mean horizontal and vertical. They mean along the direction and across it, and the direction is something you set.

The trap, stated directly

With flex-direction: row, justify-content works horizontally and align-items vertically. Switch to column and they swap over entirely. Every hour lost to flexbox is essentially this. The explanation underneath updates as you change the direction so the relationship is visible rather than memorised.

Main axis and cross axis

The main axis is the one items flow along, set by flex-direction. The cross axis is perpendicular to it. justify-content distributes space along the main axis; align-items positions items on the cross axis. Once those two names stick, the rest follows.

gap, and why it replaced margins

gap puts space between items without adding it outside the first and last, which is exactly what margins get wrong and what people used to fix with :last-child hacks. It is supported in every current browser and there is no longer a reason to avoid it.

nowrap means shrink, not overflow

The default is nowrap, and items shrink below their natural size to fit rather than moving to a new line. That is why text sometimes squashes unexpectedly inside a flex row. Setting wrap lets items move down instead; min-width: 0 on a child stops it shrinking past its content.

Centring both ways

justify-content: center with align-items: center centres an item in both directions regardless of flex-direction, which is the one combination worth memorising outright.