Tools · CSS · Flexbox playground

Flexbox playground

Build a CSS flexbox layout - direction, wrap, justify, align, gap, and per-item grow/shrink/basis - with a live preview, and copy the code.

Drop a file here, or choose one.

Runs fully in your browser. Nothing is uploaded.

How it works

Pick a preset, or start from the default row of items.
Adjust the container controls, then select an item to tune its own grow, shrink, and basis.
Copy the generated CSS.

Frequently asked questions

Is this uploaded anywhere?

No. The layout and the generated CSS are built entirely in your browser.

Why don't flex-grow, flex-shrink, or flex-basis show up in the CSS for every item?

Only values that differ from the CSS defaults are written out, the same as a developer would type by hand - an untouched item adds nothing to the output.

Why doesn't align-content do anything when I change it?

It only affects a wrapped, multi-line container. Turn Wrap on to see it take effect.

Does this behave differently on a right-to-left page?

Yes, and that's correct. flex-direction: row already reverses under RTL with no extra code - this tool shows real flexbox behavior, not a left-to-right approximation.

Related tools

Comments

No comments yet. Be the first to share your experience.