Flexbox playground
Tweak flex container properties and per-item overrides, watch the layout change live, and copy the CSS when it looks right.
Container
Items
Click an item in the preview to edit its flex properties.
Preview
Item overrides
Generated CSS
Everything runs in your browser. The preview box uses the newspaper theme; your copied CSS can style items however you want.
About this tool
Flexbox is the go-to layout mode for one-dimensional alignment — a row of cards, a vertical stack, a navbar with spaced items. This playground lets you flip the main properties without writing CSS by hand, see what each knob does, and copy the result into your project.
Click any numbered item to set per-item overrides like flex-grow or order. Only non-default values appear in the generated CSS.
Read more
- A guide to CSS Flexbox — the full tutorial
- How to center an item with Flexbox
- How to stick an item to the bottom with Flexbox
- CSS centering — flexbox and other methods
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →