Learn and build CSS layouts visually with this interactive Flexbox Playground. Adjust
container properties like justify-content and align-items, add child items, and instantly copy the generated CSS.
Try:
Container Properties
display
flex-direction
flex-wrap
justify-content
align-items
align-content
Only visible when wrapping
creates multiple lines
gap 8px
Click any item in the preview to edit its individual flex properties (flex-grow, flex-shrink, flex-basis,
align-self, order).
Live Preview
flex-growflex-shrinkflex-basis
align-selforder
Click an item to edit its flex properties
Generated CSS
Advertisement
Container Properties
Change flex-direction, flex-wrap,
justify-content, align-items, align-content, and gap on
the left. The preview updates live and the CSS output reflects every change.
Item Properties
Click any numbered box in the preview to open its editor. Set flex-grow,
flex-shrink, flex-basis, align-self, and order per item.
Items with custom properties show an orange badge.
align-content
align-content only has a visible effect when flex-wrap: wrap
is set and items wrap onto multiple lines, leaving extra space to distribute.
Varying Heights
Items have slightly different heights and font sizes by design — this makes
align-items, align-content, align-self, and especially
baseline alignment visibly distinguishable, the same way the items differ in the reference
diagrams.
flex-basis
Accepts auto, a fixed size (100px, 10rem), a
percentage (25%), or a calc() expression (calc(50% - 10px)). It's the
item's starting size before flex-grow/flex-shrink are applied.
CSS Output
⎘ Copy copies the container rule. ⎘ Copy Item Rules copies CSS
for items with custom properties (e.g. .item-2 { flex-grow: 2; }).
Adding Items
Use + Item / − Item to add or remove boxes from the preview
(2–10 items). Each item keeps its own flex properties.
Advertisement
How to use
Open the tool and enter your data or select options.
Adjust settings to see real-time updates.
Copy the generated result to your clipboard.
Frequently Asked Questions
What is CSS Flexbox?
CSS
Flexible Box Layout (Flexbox) is a layout model that allows elements to align and distribute space within a
container, even when their size is unknown or dynamic.
Does this support flex-wrap?
Yes,
you can toggle flex-wrap on the container to see how items behave when they run out of space.
Can I copy the code?
Absolutely. The exact CSS required to reproduce your visual layout is generated in real-time at the bottom of
the page.
Did you know?
Flexbox was first proposed by Mozilla in 2009 and went through multiple draft syntax changes before
finalizing.
Flexbox is primarily designed for one-dimensional layouts (either a row or a column), unlike CSS Grid which is
two-dimensional.
Before Flexbox, developers had to rely on hacks using floats and tables to vertically center content.