CSS Flexbox Playground

Learn and build CSS flexbox layouts by clicking: change flex-direction, wrap, justify-content, align-items, align-content and gaps, tune each item’s flex-grow, flex-shrink, flex-basis, align-self and order, and copy the generated CSS.

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Flexbox Playground

1Set the container properties on the left — direction, wrap, alignment and gaps.
2Click an item (or its number) to edit its flex-grow, flex-shrink, flex-basis, align-self and order.
3Drag “Preview width” to see how the layout responds to narrower screens.
4Copy the generated CSS, or press Randomize for an example to study.

What is the CSS Flexbox Playground?

Flexbox lays items out along one axis. flex-direction sets that main axis (row or column); justify-content spaces items along it, and align-items positions them on the cross axis. With flex-wrap: wrap, items move onto new lines when they run out of room, and align-content then spaces those lines.

Each item’s flex shorthand — grow, shrink, basis — decides how it shares space: flex: 1 1 0 makes items equal widths, flex: 0 0 200px fixes a width. The generated CSS only includes properties that differ from the defaults, so it stays short.

Frequently asked questions

How do I centre something with flexbox?

On the container: display: flex; justify-content: center; align-items: center; — and give it a height if you want vertical centring.

Flexbox or grid?

Flexbox for one dimension — a row of buttons, a navigation bar. Grid when you need rows and columns at the same time.

Is the CSS Flexbox Playground free and private?

Yes. The CSS Flexbox Playground is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →