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.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
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
No. The layout and the generated CSS are built entirely in your browser.
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.
It only affects a wrapped, multi-line container. Turn Wrap on to see it take effect.
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.
Guides
A closer look at specific problems this tool solves.
Why Flex Items Never End Up the Width You Gave Them
In flexbox, a width is a starting point, not a promise. flex-basis sets where each item begins, then grow and shrink hand out or take back whatever space is left on the line. Once you see that, most surprises stop being surprises.
Read the guideHow to Make One Flex Item Fill the Remaining Space
A fixed-width sidebar next to a column that takes everything else is two flex properties. Getting it to stay fixed when the window narrows, and stopping long content from breaking it, takes two more. Here is the whole set, built live.
Read the guideA Flexbox Header Row That Survives Longer Words
Logo on one side, links in the middle, a button on the other: space-between does it in one line. Then the page is translated, the words get longer, and the row overflows. This is how this site's own header handles it.
Read the guide
Comments