CSS & Design
Flexbox Playground
Visually explore CSS Flexbox — tweak container and item properties with a live preview and copy-ready CSS.
Presets
Container
flex-direction?Sets the main axis. row = left→right, column = top→bottom. -reverse variants flip the order.
flex-wrap?Controls whether items stay on one line (nowrap) or wrap to new lines when they overflow.
justify-content?Distributes items along the main axis. Controls spacing between and around items.
align-items?Aligns items along the cross axis (perpendicular to main axis) within a single line.
align-content?Aligns lines when there is extra space in the cross axis. Only applies when flex-wrap is wrap.
row-gap: 8px?Sets the gutter size between flex items. row-gap affects space between rows, column-gap between columns.
column-gap: 8px
Items (3)
Live Preview
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
gap: 8px;
}
.item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}HTML
<div class="container"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> </div>
All processing happens in your browser. Nothing is sent to a server.
☕ Love this tool? Support the developer.
100% free — no ads, no limits. Your support keeps every tool free.
Secure payment via Stripe · No account needed
About Flexbox Playground
OptiPix Flexbox Playground is an interactive visual editor for CSS Flexbox. Adjust every container property — flex-direction, flex-wrap, justify-content, align-items, align-content, row-gap, and column-gap — and see the result instantly in a large live preview. Click any item in the preview to configure its individual properties: flex-grow, flex-shrink, flex-basis, align-self, and order. Add or remove flex items on the fly. Six built-in presets (Navigation Bar, Card Grid, Sidebar Layout, Centered Content, Footer, Holy Grail) let you jump straight to common real-world patterns. Educational tooltips explain what each property does. The CSS Output panel generates ready-to-use .container and .item-N rules, and one-click Copy CSS / Copy HTML buttons let you drop the code straight into your project. Everything runs client-side — no uploads, no accounts.
How It Works
The playground stores container and per-item state in React. Each control update re-computes inline styles applied to the live preview div. The CSS Output panel derives its text from the same state, so the code always matches what you see. Copy buttons write the generated text to the clipboard.
Use Cases
- •Learn how flex-direction, justify-content, and align-items interact visually
- •Prototype navigation bar, sidebar, and card grid layouts
- •Debug unexplained flexbox behaviour by tweaking properties live
- •Generate accurate flexbox CSS without memorising the spec
- •Teach or demonstrate flexbox concepts with real-time feedback
Frequently Asked Questions
What container properties can I control?
Can I configure individual flex items?
What are the presets for?
Does it generate copy-ready CSS?
Is anything sent to a server?
Related Tools
CSS Box Shadow Generator
Create CSS box shadows with visual controls, multiple layers, and Material Design presets.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor and presets gallery.
CSS Border Radius Generator
Generate CSS border-radius with individual corner control and organic blob shapes.
Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur, transparency, and customizable backgrounds.