Every flex property, one preview.
Toggle the container properties and watch three items react in real time, then copy the CSS.
Flexbox CSS is generated in the browser. Nothing is uploaded.
What it does
About the Flexbox Playground.
A Flexbox playground applies container properties such as direction, wrap, alignment, and gap to live items so you can copy working CSS.
Flexbox is still the fastest way to align toolbars, button groups, and stacked mobile sections. Seeing three items react as you toggle justify and align beats memorizing the chart.
How to use
Three steps.
Set
Toggle direction, wrap, justify-content, align-items, and gap.
Read
Watch the sample items reflow in the preview.
Copy
Copy the CSS for the container when the alignment matches the spec.
When to use it
Where it helps.
Use it for nav rows, card footers, and form actions. If you need a full page of rows and columns, switch to the CSS Grid generator instead.
FAQ
FAQ.
Which Flexbox properties can I control?
You can tune container properties including flex-direction, flex-wrap, justify-content, align-items, and gap, then copy those declarations.
How do I copy the CSS?
Copy the generated rule set and paste it on the flex container. Item-level properties such as flex-grow still belong on the children.
Does this require a backend?
No. The playground is client-side. Nothing is uploaded.
Why do my items not stretch the way I expect?
Align-items and the item’s own height or width interact. Stretch only works if the item does not have a fixed size on that axis. Use the preview to confirm before you ship.
More tools
layout
Spacing/Sizing Scale Calculator
Build a spacing scale from a base unit, linear or geometric.
layout
Aspect Ratio Calculator
Solve for width, height, or CSS aspect-ratio from any two values.
layout
CSS Grid Generator
Set columns, rows, and gap, then copy production CSS Grid.