Flexbox Playground
Adjust flex container properties with dropdowns and watch a live preview update. Copy the generated container CSS. Everything runs in your browser.
Container properties
Items
About the Flexbox Playground
The Flexbox Playground lets you set the main flex container properties with dropdowns and see the result in a live preview. Change flex-direction, justify-content, align-items, align-content, flex-wrap, and gap, then read the generated container CSS and copy it into your stylesheet. It is built for developers and designers learning flexbox or building a layout. Everything runs in your browser, so nothing is uploaded.
How it works
- Pick values for flex-direction, flex-wrap, justify-content, align-items, align-content, and gap from the dropdowns.
- Watch the numbered items in the preview rearrange as you change each property.
- Use Add item and Remove item to change how many items are in the container.
- Copy the generated container CSS from the mono box into your project.
Features
- Dropdowns for the six core container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, and gap.
- Live preview with numbered, color-coded items that update on every change.
- Add and remove items to test layouts with different counts.
- Generated container CSS that lists only the properties you changed from their defaults.
- One-click copy of the CSS output.
Frequently asked questions
Does this send my settings anywhere?
No. The preview and the generated CSS are built locally in your browser with plain JavaScript. Nothing is uploaded or stored.
Why does the CSS only show some properties?
The output lists display: flex plus any property you changed from its default. Properties left at their default value are left out to keep the CSS short. To see a property appear, set it to a non-default value.
What is the difference between align-items and align-content?
align-items sets how items line up on the cross axis within a single line. align-content sets how multiple lines are spaced when items wrap, so it only has a visible effect when flex-wrap is set to wrap or wrap-reverse and there is more than one line.
Does the tool set per-item properties like flex-grow or order?
No. This playground focuses on the container properties. The items use default values, so the generated CSS covers the .container rule only.
Can I use the generated CSS directly?
Yes. Copy the .container rule and apply it to your own wrapper element. Give that element the class container, or rename the selector to match your markup.