🔧

Flexbox Playground

Experiment with all CSS flexbox properties in a visual playground. See how each property affects layout in real time.

Input

Output

How to Use

Set up your flex container by choosing the flex direction (row, row-reverse, column, column-reverse) and wrap behavior (nowrap, wrap, wrap-reverse). The playground renders colored flex items so you can see exactly how the layout responds.
Configure alignment: `justify-content` controls spacing along the main axis (start, center, end, space-between, space-around, space-evenly). `align-items` controls positioning along the cross axis. Use `align-content` when wrapping is enabled to control multi-line spacing.
Experiment with individual flex item properties: `flex-grow` (how much an item grows relative to siblings), `flex-shrink` (how much it shrinks), `flex-basis` (initial size), and `align-self` (overrides container's align-items for a single item). Copy the complete CSS when you're satisfied.

What's the difference between space-between, space-around, and space-evenly?: `space-between` puts the first item at the start and last at the end, with equal space between each pair. `space-around` adds equal space around each item (half-sized at the edges). `space-evenly` distributes space so the gap between any two items — and between items and container edges — is identical. Try all three in the playground to see the visual difference.
When should I use flex-grow vs flex-basis?: `flex-basis` sets the initial size of a flex item before growing or shrinking. `flex-grow` defines how much of the remaining space the item should take. Use `flex: 1` (shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0`) to make all items equal width. Use `flex-basis: 200px` with `flex-grow: 1` for minimum-width columns that expand.
Can flexbox replace float-based layouts?: Yes — flexbox is the modern replacement for float-based layouts and has been supported in all browsers since IE11. It handles vertical centering, equal-height columns, and source-order independence far more elegantly than floats. Together with CSS Grid, flexbox is the standard for modern CSS layout.