What this playground is for
Flexbox makes sense the moment you watch boxes move. Reading the spec doesn’t do that. This page hands you the six properties that matter most on a flex container, wires them to a row of live items, and shows the exact CSS you’d paste into a stylesheet. Click space-between, the items spread apart. Switch to column, they stack. The preview never lies.
You control flex-direction, justify-content, align-items, align-content, flex-wrap, and gap. Add items up to twelve, remove them down to one. That’s enough to reproduce the layout problems you actually hit: a navbar, a centered hero, a card grid that wraps.
The properties, untangled
People mix up the two alignment axes constantly, so here’s the short version. justify-content moves items along the main axis. align-items moves them along the cross axis. The catch? The main axis flips depending on flex-direction. In a row, justify is horizontal. Switch to column and justify goes vertical. That single rule explains most flexbox confusion.
A few notes on the rest:
- flex-wrap decides whether items spill onto new lines or squeeze onto one. Set it to
wrapand watch nine items break into rows. - align-content only does anything once there are multiple lines. With
nowrap, it’s dead weight, so the playground hides it from the output until wrapping is on. - gap is the clean way to space items now. No more margin hacks on every child.
How to drive it
Pick a preset if you want a head start. “Navbar” gives you three items pushed apart with space-between. “Wrapping cards” drops nine items in a grid that reflows. From there, tap any chip to change a property and the boxes rearrange instantly.
The plus and minus buttons next to the preview change how many items you’re laying out. This matters more than it sounds. space-around with three items looks nothing like space-around with eight. Test the count you’ll really ship.
When the layout’s right, hit Copy or grab the .css file. The output is just the container rules, ready to drop onto any div.
Worth knowing
The items here use varied heights on purpose. That’s the only way align-items: flex-start versus center versus baseline shows a visible difference. Real content has uneven heights too, so this mirrors reality better than a row of identical squares would.
One honest limitation: this builds the container, not the children. Properties like flex-grow, flex-shrink, and align-self live on individual items and aren’t part of what gets generated here. For the vast majority of layouts you won’t miss them. Equal items, a justify rule, and a gap handle a huge slice of real-world flex.
Questions people ask
What’s the difference between justify-content and align-items? Justify works along the main axis, align works along the cross axis. In a row that means justify is left-to-right and align is top-to-bottom. Flip to a column and they swap. Same properties, axes rotated.
Why isn’t align-content doing anything?
It only kicks in when items wrap onto more than one line. Turn flex-wrap to wrap and add enough items to force a second row, then it takes effect. That’s why the tool hides it from the CSS while you’re on nowrap.
How do I center a single element both ways?
Set justify-content: center and align-items: center. The “Center everything” preset does exactly that. Works the same whether the direction is row or column.
Can I use gap with flexbox safely?
Yep. Every browser people still target supports gap on flex containers. It replaced the old margin-on-each-child approach and there’s no reason to go back.
Does anything get uploaded? Nope. The CSS is assembled in your browser as you click. Nothing leaves the page, nothing’s saved anywhere.