Flexbox Generator
Build CSS Flexbox layouts visually and copy the code, with each property explained and the common centring and spacing patterns ready to use.
The three space-* values differ by exactly one ratio
All three put the leftover width into gaps. They differ only in how much goes at the two outer edges relative to the gaps between items. Taking 3 items of 60px in a 300px container, which leaves 120px to share out:
| justify-content | Leading gap | Between items | Trailing gap |
|---|---|---|---|
flex-start | 0.0 | 0.0 | 120.0 |
center | 60.0 | 0.0 | 60.0 |
flex-end | 120.0 | 0.0 | 0.0 |
space-between | 0.0 | 60.0 | 0.0 |
space-around | 20.0 | 40.0 | 20.0 |
space-evenly | 30.0 | 30.0 | 30.0 |
The outer gap as a multiple of the inner one is between 0, around 0.5, evenly 1 — zero, a half, and one. That is the entire difference between them, and it is exact. Checked at 2, 3, 4, 5, 8 items, the ratio never drifts.
space-around is the one people misremember, because the name suggests equal space
all round. It gives each item its own equal allowance and centres the item inside it, so two
neighbours contribute half an allowance each to the gap between them while an outer edge only
gets one half. Hence 20/40/20 rather than 30/30/30 — the middle gaps come out twice the
outer ones.
And gap does not do what you might expect alongside them
A gap reserves space between items before the leftover is shared out, so the leftover shrinks by exactly the same amount. Same three items, with and without a 20px gap:
| justify-content | gap 0 | gap 20 |
|---|---|---|
space-between | 0.0 / 60.0 | 0.0 / 60.0 |
space-around | 20.0 / 40.0 | 13.3 / 46.7 |
space-evenly | 30.0 / 30.0 | 20.0 / 40.0 |
With space-between the two cancel completely — identical layout either
way, because the 40px of gap comes straight out of the 120px that
was going to be distributed anyway. With the other two they do not cancel, because gap only
ever applies between items and never at the edges, so it all lands on the inner
spaces and the neat outer ratio breaks.
The rule that falls out: use gap when you want a guaranteed minimum separation,
and justify-content when you want a specific distribution. Setting both gives you
the gap plus whatever justify-content does with what is left, which is rarely the layout
anybody had in mind.
flex-start does not mean left
It means the start of the main axis, and row-reverse runs that axis right to
left. The same declaration that put the first item at x = 0 puts it
at x = 240 in the same 300px container:
| flex-direction | Item positions, left to right | First item in source order |
|---|---|---|
row | 0, 60, 120 | x = 0 |
row-reverse | 120, 180, 240 | x = 240 |
The whole group moved to the other end of the container, and the items reversed within it.
Nothing about the justify-content value changed — the property is behaving exactly as
written, against an axis pointing the other way. This is the most common source of "my
flexbox ignored me", and it applies to space-between too: the item that is
first in the source ends up on the right.
The same reversal happens on the cross axis with wrap-reverse, where
align-items: flex-start starts aligning things to the bottom. If a value
seems to be doing the opposite of what it says, check the direction before checking the
value.
How to use
- Set the direction and wrapping.
- Adjust alignment along and across the axis.
- Watch the preview update.
- Copy the generated CSS.
Frequently asked questions
What is the difference between justify-content and align-items?
Which axis they act on. Justify-content distributes items along the main axis — horizontally by default — while align-items positions them across the cross axis. Swapping the flex direction swaps which is which, which is the source of most confusion with Flexbox.
How do I centre something both ways?
Set the container to display flex, then justify-content and align-items both to center. Three lines, and it works regardless of the content's size — a problem that was genuinely difficult before Flexbox existed and is now trivial.
What does the flex shorthand mean?
Three values: how much an item grows relative to its siblings, how much it shrinks, and its starting size before growing or shrinking. The common value of 1 means grow to fill, shrink if needed, and start from zero — which makes items share space equally regardless of content.
Why is my flex item overflowing its container?
Almost always because its minimum content size will not let it shrink further. Flex items default to a minimum size based on their content, so a long unbroken string or a wide image refuses to shrink. Setting min-width to zero on the item is the standard fix.
When should I use Flexbox over Grid?
For one-dimensional arrangements — a navigation bar, a row of buttons, a card's internal stack. Flexbox sizes items from their content outward, which suits components; Grid defines a structure that content fits into, which suits page layout.
Does the gap property work in Flexbox?
Yes, in all current browsers. It replaced the old approach of adding margins to every child and then removing it from the last, which was fiddly and broke when items wrapped. Gap handles both axes and behaves correctly with wrapping.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.