1
2
3
4
5
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px;
gap12px
How to use
01
Set direction and wrap
Choose flex-direction from the dropdown (row, row-reverse, column, or column-reverse) and pick a flex-wrap value. The preview boxes rearrange immediately, so you can confirm which way the main axis now runs.
02
Align with the two dropdowns
Select justify-content to distribute items along the main axis and align-items to position them on the cross axis. Drag the gap slider up to 48px and change Item count to test crowding.
03
Copy the CSS
Check the generated block, six declarations starting with display: flex, then press the copy button. Paste the rule onto your container element and every direct child becomes a flex item.
Why CSS Flexbox Generator
- Visual flexbox playground with live preview.
- Every common flex property as a control.
- Outputs spec-compliant CSS shorthand.
Common questions
What CSS does the flexbox generator actually output?
Six container-level declarations: display: flex, flex-direction, justify-content, align-items, flex-wrap, and gap in pixels. That's the complete recipe for the container. It doesn't write per-item properties like flex-grow or order, since those belong on the children.
Why does justify-content stop meaning horizontal when flex-direction is column?
Because justify-content always follows the main axis, and flex-direction decides where that axis points. In a column container the main axis runs top to bottom, so justify-content controls vertical spacing and align-items takes over the horizontal. Switch the direction dropdown and watch the preview to see the swap happen.
Can the flexbox playground show me what happens when items overflow?
Yes. Set Item count to 20 while flex-wrap stays on nowrap and you'll see the boxes squeeze and spill past the container edge. Switch to wrap and they break onto new lines instead. It's a quick way to test a layout before the real content exists.
Does this tool set flex-grow or flex-basis on individual items?
No. Treat it as a flex layout generator for the container, then add per-item rules by hand. A common pattern is flex: 1 on the child you want to absorb leftover space while siblings keep their natural size.
Is gap better than margins between flex items?
Almost always. The gap property only adds space between items, never before the first or after the last, so you skip the usual first-child and last-child margin resets. The slider here goes from 0 to 48px, which covers most spacing scales.
When should I pick space-evenly over space-between in a flex container?
Use space-between when the first and last items should touch the container edges, like a logo and a menu button. Use space-evenly when you want identical gaps everywhere, including the outer edges. Try both in the justify-content dropdown; the difference is obvious with five preview boxes.
How do I center a div both horizontally and vertically with flexbox?
Set justify-content to center and align-items to center, the two middle options in the dropdowns. With flex-direction: row that centers on both axes at once. It's the two-line answer to the oldest CSS question there is.