Flexbox Playground
Design Tools
Experiment with Flexbox layouts interactively — adjust container properties, item flex shorthand, and align-self, then copy the CSS.
Runs entirely in your browserAbout Flexbox Playground
Flexbox is the layout model that finally made aligning things in CSS sane. But its terms — `justify-content`, `align-items`, `flex-grow`, `flex-shrink`, `flex-basis` — are abstract until you can see them change in real time. The Flexbox Playground gives you live, visual feedback for every property: change the container's `flex-direction` and the items rearrange instantly; tweak `justify-content` and see the spacing redistribute.
You can add or remove items (up to 8), set per-item `flex` shorthand and `align-self`, and click any item to highlight it. The result is two CSS panels — one for the container, one for the currently selected item — both ready to copy. This is the layout tool for prototyping, but it doubles as the fastest way to build intuition for Flexbox if you've been guessing at properties.
How to use
- 1
Set container properties
Use the dropdowns for direction (row/column), justify-content, align-items, and flex-wrap. The gap slider sets the spacing between items.
- 2
Add or remove items
Click Add item or the × on an item row. Items are numbered 1–8.
- 3
Tune individual items
Click a numbered item to select it, then edit its `flex` shorthand (e.g. `1 0 auto`) and `align-self` value.
- 4
Copy the CSS
Two panels appear — Container CSS and Item CSS for the selected item. Use the Copy buttons to grab them.
Examples
Centered row
Most common pattern — center items horizontally and vertically.
Output
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 12px;Space-between header
Logo on the left, nav on the right.
Output
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 12px;Frequently asked questions
What's the difference between justify-content and align-items?+
`justify-content` aligns items along the main axis (the direction set by `flex-direction`). `align-items` aligns them along the cross axis (perpendicular). With `flex-direction: row`, justify is horizontal and align is vertical.
What does `flex: 1 1 auto` mean?+
It's shorthand for `flex-grow: 1, flex-shrink: 1, flex-basis: auto`. The item will grow and shrink to fill available space, starting from its content-based size.
When should I use `align-self` on an item?+
When one item needs different alignment than the others. For example, a row of buttons aligned to the bottom (`align-items: flex-end`) but a single tall item that should stretch (`align-self: stretch`).
Should I use Flexbox or Grid?+
Flexbox is for 1D layouts (a row or a column). Grid is for 2D layouts (rows and columns at once). For navigation bars, button rows, and stacks: Flexbox. For full-page layouts and card grids: Grid.
Does the playground support every Flexbox property?+
It covers the common ones used in 95% of layouts. Less common properties like `align-content` (for wrapped flex containers) aren't surfaced — use them directly in your CSS after copying the base.
Related tools
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview.
Box Shadow Generator
Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.
Border Radius Generator
Create custom rounded corners with per-corner control and squircle presets.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
CSS Formatter
Format and organize CSS automatically with configurable brace and indent styles.