Drag the sliders, click a box, and watch a live flex container rearrange itself — then copy the exact CSS. The whole playground runs in your browser.
Everything happens locally in your browser. Nothing ever leaves your device.
Click a box to tune its individual flex; click again to deselect.
No box selected
The playground is a real flex container: every control rewrites the inline styles of the stage, and the CSS panel mirrors exactly what you see. The key is axes. flex-direction picks the main axis — row runs left to right, column runs top to bottom, the -reverse variants just flip the writing direction. justify-content then distributes free space along that main axis, and align-items positions each item across the cross axis at right angles to it. Switch the stage to column and watch justify and align swap visual roles while the property names stay put.
Yes, for flexbox it is safe on every modern browser: gap on flex containers shipped in Chrome 84, Firefox 63 and Safari 14.1, so it has been Baseline-matching for years. Older Firefox got flex gaps first, older Safari last — anything still on iOS 13 or macOS Safari 13 needs margins instead of gap.
Because gap is not subtracted from a percentage basis before CSS box-sizing math settles, and percentage bases resolve against the container's inner size. Two children at flex-basis: 50% plus any gap no longer fit, so they wrap one per line. Use calc(50% - 8px) style bases, or flex-basis: 0 with flex-grow, and let the browser do the splitting.
Not in any way you should worry about today. Safari 14.1+ implements the modern flexbox spec faithfully, including gap and align-content on wrapped lines. The old -webkit-flex prefix dance is only relevant if you support iOS 9-10, and this tool deliberately does not emit prefixed output.
Almost always because the container has a single line of items. align-content only distributes whole flex lines, and with flex-wrap: nowrap there is exactly one line, so the property is ignored. Set wrap to wrap, force items onto two lines with a basis or min-width, and the control suddenly works.
No. The playground is pure CSS: your slider positions are turned into a stylesheet string in memory and copied from your clipboard. Nothing is stored, sent or fetched, and the page keeps working with the network switched off.
If you just finished with Flexbox Generator, the natural next steps are CSS Grid Generator, Box Shadow Generator, Border Radius Generator, or browse every tool in Daily Tools.