CSS Flexbox Playground
Experiment with every Flexbox property in real time โ see the result and copy the CSS.
What is CSS Flexbox?
CSS Flexbox (Flexible Box Layout) is a layout model that makes it easy to arrange elements in a row or column, distribute space between them, and align them along one or two axes. It's the go-to layout tool for navigation bars, card grids, centred content, and responsive components. Understanding Flexbox's container properties (display: flex, justify-content, align-items, flex-wrap) and item properties (flex-grow, flex-shrink, align-self) is fundamental to modern CSS.
This playground lets you experiment with all the key container properties in real time โ click any value button and see the result immediately. The generated CSS is clean and ready to paste into any project.
How to Use
- Click any property value button to apply it โ the preview updates instantly.
- Adjust the Item Count to add or remove flex items.
- The Generated CSS panel shows the exact CSS to reproduce the layout.
- Click โฟป Copy CSS to copy the CSS to your clipboard.
- Click โบ Reset to return to default settings.
Frequently Asked Questions
justify-content controls alignment along the main axis (horizontal in row, vertical in column). align-items controls alignment along the cross axis (the perpendicular one). So in a row layout, justify-content: center centres items left-to-right, and align-items: center centres them top-to-bottom.