📐 CSS Flexbox Playground
Interactive flexbox playground. Adjust container and item properties to see flexbox layout in action — all in your browser, instant results.
About the CSS Flexbox Playground
This flexbox playground runs entirely in your browser. Adjust the container properties (flex-direction, justify-content, align-items, flex-wrap, align-content) and the number of items to see how flexbox layout works in real time. Copy the generated CSS code into your project.
Flexbox properties explained
- flex-direction — Defines the main axis direction: row (left to right), column (top to bottom), or their reverses.
- justify-content — Aligns items along the main axis. Controls spacing and distribution.
- align-items — Aligns items along the cross axis. Controls how items fill the perpendicular space.
- flex-wrap — Whether items wrap onto multiple lines or stay on one line.
- align-content — Aligns multi-line content when there's extra space on the cross axis. Only applies when flex-wrap is enabled.
How to use the playground
- Set the number of flex items using the number input.
- Change any of the dropdown selects to apply flexbox properties.
- Watch the playground update in real time.
- Click Copy CSS to copy the generated code.
Frequently asked questions
What's the difference between justify-content and align-items? justify-content works on the main axis (defined by flex-direction), while align-items works on the cross axis (perpendicular to the main axis).
Why doesn't align-content seem to work? align-content only has an effect when flex-wrap is set to wrap or wrap-reverse and there are multiple lines.
Can I style individual items? This playground focuses on container properties. In your own code, you can set flex-grow, flex-shrink, and flex-basis on individual items.