Experiment with flexbox properties on a live preview and copy the generated CSS.
About this tool
The CSS Flexbox Playground is an interactive editor for a flex container's main layout properties. Choose values for flex-direction, justify-content, align-items and flex-wrap from four dropdowns, and a preview of five numbered boxes rearranges instantly, so you can see how each property shapes the layout before writing any code.
Below the preview the matching .container rule is generated as you work: display: flex followed by the four declarations you picked. One button copies the whole block to your clipboard, ready to paste into a stylesheet. Only these container-level properties are exposed; per-item settings such as flex-grow, order or align-self are not covered.
Everything runs in your browser. Nothing is uploaded, there are no accounts or tracking, and it works offline. It is a fast way to build flexbox intuition or to produce a starter rule you then refine by hand.
Frequently asked questions
What does the preview show?
A flex container holding five numbered boxes that re-arrange live as you change flex-direction, justify-content, align-items or flex-wrap.
Is the generated CSS ready to use?
Yes. Copy the generated .container rule straight into your stylesheet; it contains display: flex plus the four properties you selected.
Which flexbox properties can I adjust?
Four dropdowns control flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) and flex-wrap (nowrap, wrap, wrap-reverse).
Does the output include gap or per-item flex settings?
No. The copied rule holds only display: flex and the four container properties. The 8px gap in the preview is just for spacing, and item-level properties like flex-grow, order or align-self are not included.