About Flexbox Generator
Flexbox is one dimensional: it lays items out along a single axis, and everything else follows from which axis that is. Once flex-direction is row, justify-content moves items horizontally and align-items moves them vertically. Set it to column and those two swap. Almost all confusion with flexbox comes from reaching for the wrong one of that pair.
That is why this shows a live container rather than a diagram. The preview is a real flex container with the properties applied, so changing flex-direction visibly swaps what the other controls do, which is far quicker to internalise than reading that main and cross axes exist.
Items in the preview deliberately vary in height, because align-items does nothing visible when everything is the same size — a static mock-up hides the very property people came to understand.
How to build a flex layout
Pick a direction
Row or column. This decides which axis the other properties operate on.
Set alignment
justify-content works along the direction; align-items works across it.
Copy the CSS
Only the properties that differ from the defaults are included, so the output stays short.
The properties worth knowing
- justify-content — position along the main axis. space-between is the classic navigation bar layout.
- align-items — position across the main axis. center is the answer to most vertical-centring questions.
- align-content — spaces the wrapped lines, and does nothing at all until flex-wrap allows more than one.
- gap — spacing between items, and far better than margins because it does not add space at the outer edges.
- flex-wrap — off by default, which is why items shrink rather than wrapping when space runs out.