CSS Flexbox Playground
Change any flex property and watch the boxes move, then copy the generated CSS.
See What Every Flexbox Property Actually Does
Flexbox is not hard, but it is confusing in one specific way: justify-content and align-items swap meaning when you change flex-direction. Justify always works along the main axis and align always works across it, so flipping direction to column makes justify vertical. Most flexbox frustration is that one fact not yet internalised.
This playground makes it visible. Change any property and the boxes rearrange immediately, so the relationship between the axes stops being abstract. The CSS is generated alongside, ready to copy.
Key features
- Every container property — flex-direction, flex-wrap, justify-content, align-items, align-content and gap.
- All the values, not a few — including space-between, space-around and space-evenly, and baseline alignment, which are the ones people never remember the difference between.
- Adjustable item count — behaviour with three items genuinely differs from behaviour with nine, especially once wrapping is on.
- Live CSS output — the container rule is generated as you change it, ready to copy.
- Instant feedback — the boxes rearrange as you change a value, which is the only way the axis rules ever become intuitive.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS Flexbox Playground
- Set the direction
Row or column. Watch what happens to justify and align — this is the key insight. - Try the alignment properties
Step through each value of justify-content and align-items and observe the effect. - Change the item count
Add items until they wrap, then compare how align-content and align-items behave — they only differ once there is more than one line. - Copy the CSS
The generated rules match exactly what you see.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
When should I use flexbox rather than grid?
Flexbox for one dimension — a row of buttons, a navbar, a card’s internal stack. Grid for two — page layouts and galleries where rows and columns both matter. They coexist happily; a grid item can be a flex container.
Why does align-items do nothing?
Usually because the container has no height beyond its content, so there is no cross-axis space to align within. Give the container a height and the property takes effect.
What is the difference between align-items and align-content?
align-items positions each line’s contents across the cross axis; align-content distributes the lines themselves. With <code>nowrap</code> there is only one line, so align-content does nothing at all — which is why it so often appears broken. Turn wrapping on and add items to see it work.
Why do my items overflow instead of wrapping?
Because <code>flex-wrap</code> defaults to <code>nowrap</code>. Set it to <code>wrap</code> and the items will move to a new line rather than shrinking past their content.