The two axes, once and for all
Flexbox has a main axis and a cross axis. flex-direction sets which is which: with row the main axis is horizontal, with column it is vertical. justify-content distributes items along the main axis; align-items positions them on the cross axis. Almost every flexbox confusion is a mix-up between those two.
Choosing the right distribution
space-between pins the first and last item to the edges — the standard navbar pattern. space-evenly gives equal gaps including the edges, which looks better for centred button groups. center plus gap is the modern way to centre anything; margin auto tricks are no longer needed.
When flexbox is the wrong tool
- Two-dimensional grids with aligned rows and columns → CSS Grid
- Equal-width cards that wrap → Grid with auto-fit or flex with flex: 1 1 240px
- Sticky footers in a column layout → flex column with margin-top: auto on the footer
Gap support and fallbacks
gap for flexbox is supported in every current browser. If you must support very old Safari, fall back to margins on children with negative margin on the container.
Frequently Asked Questions
Why is my item not centring?
Check which axis you set. With flex-direction: row, align-items controls the vertical axis and justify-content the horizontal one.
How do I make one item fill the space?
Give it flex: 1 (or flex-grow: 1). The remaining items keep their intrinsic size.
What does align-content do?
It distributes wrapped lines along the cross axis. It has no effect unless flex-wrap is set and the lines actually wrap.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.