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.
What can the flexbox layout tool online do that a static cheatsheet can't?
Because it's a live flexbox layout tool online, you drag justify-content and align-items and watch the numbered boxes reflow instead of guessing from a diagram. Raise the item count to 20 to see crowding before the real content exists. Every change updates the copyable rule underneath.
Is there one flexbox and grid css generator here, or two separate tools?
They're separate. This page handles the flexbox side; for rows and columns, the CSS Grid Generator does the two-dimensional work. Treat the flexbox and grid css generator pair as a set, flexbox for one axis and grid for both.
Can I use this as half of a flexbox and grid builder for a full page?
For the flexbox parts, yes. As one side of a flexbox and grid builder workflow, it lays out toolbars, nav rows, and card footers, then you switch to the grid tool for the page skeleton. A common flexbox grid pattern is a grid shell with flex containers living inside each cell.