Experiment with CSS flexbox visually. Tune flex-direction, justify-content, align-items, flex-wrap, gap, and per-item order, grow, shrink, basis, and align-self, then copy the generated container and item CSS.
Overview
The CSS Flex Playground is a live, visual sandbox for flexbox. Change container properties like flex-direction, justify-content, align-items, flex-wrap, and gap, then tune each item's order, grow, shrink, basis, and align-self. The preview updates instantly and the generated container and item CSS can be copied.
Common Use Cases
Learning how flexbox alignment and wrapping actually behave
Prototyping a flex layout before writing CSS
Comparing space-between, space-around, and space-evenly
Understanding how flex-grow and flex-shrink redistribute space
Seeing the difference between em-scaling and fixed sizes
Teaching flexbox to students or juniors
Debugging why items shrink, wrap, or align unexpectedly
How to Use
1
Adjust the container controls: direction, justification, alignment, wrap, gap, and height.
2
Tune each item with order, flex-grow, flex-shrink, flex-basis, align-self, width, and height.
3
Watch the live preview update on every change.
4
Copy the generated CSS block and paste it into your project.
Example Scenario
Three cards spread across a row
Set direction to row, justify-content to space-between, align-items to stretch, and remove the fixed item heights (set them to 0). The three items spread evenly and each stretches to the container height, producing the classic card row.
Technical Notes
Each item outputs the shorthand flex: grow shrink basis. For example, flex: 1 1 0% makes the item grow and shrink equally from a zero base.
flex-basis accepts auto, a length like 150px or 30%, or a unitless number which the playground converts to px.
Items use min-width and min-height of 0 so shrinking behaves like a real flex layout instead of stopping at content size.
To see align-items: stretch, clear the item height. An explicit height overrides stretch.
Common Mistakes
Expecting shrink to work while items keep a large content width
Setting height on items and then wondering why stretch has no effect
Forgetting that space-between leaves the edges flush while space-around adds half gaps at the edges
Confusing align-items (cross axis) with justify-content (main axis)
Frequently Asked Questions
justify-content aligns items along the main axis (the direction). align-items aligns them along the cross axis (perpendicular). In a row, justify moves items horizontally and align moves them vertically.
It is shorthand for flex: 1 1 0% — the item can grow and shrink and starts from a zero base, so space is distributed evenly between flexible items.
Flex items default to min-width: auto, which prevents shrinking below content size. The playground sets min-width and min-height to 0 so shrink works as expected.
This playground is about flexbox sizing, not font units. em relates to typography; flex-grow, flex-shrink, and flex-basis control how space is distributed among flex items.