Online Tool Store
Flexbox Playground
Experiment with flex-direction, wrap, justify-content, align-items, and gap on a live preview, with copyable CSS output, in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
How the flexbox playground works
- Adjust flex-direction, flex-wrap, justify-content, align-items, gap, and the number of items.
- Watch the preview boxes rearrange live as each property changes.
- Copy the generated CSS once you've found the layout you want.
FAQ
What's the difference between justify-content and align-items?
justify-content controls spacing along the main axis (horizontal for flex-direction: row, vertical for column), while align-items controls positioning along the cross axis (perpendicular to the main axis) — switching flex-direction actually swaps which axis each property affects.
Why doesn't flex-wrap do anything with a small number of items?
Wrapping only kicks in once the items no longer fit on a single line at their natural size — with just a few small boxes, there's usually enough room, so wrap and nowrap look identical until you add more items or shrink the container.
Can I copy the CSS this generates?
Yes — the CSS box below the preview updates live and reflects your exact settings; click Copy CSS to copy it directly into your own stylesheet.
Is anything sent anywhere?
No. Every property is applied instantly using your browser's own CSS engine — nothing is sent to Online Tool Store or any other server.
How we compare
| Feature | Online Tool Store | Flexbox Froggy (learning game) | Browser DevTools flex inspector |
|---|---|---|---|
| Direct CSS output to copy | ✓ | Learning-focused, no export | ✓ |
| No existing project needed | ✓ | ✓ | Requires an existing page |
| Adjustable item count | ✓ | Fixed per level | Whatever's on the page |
For quickly experimenting with flexbox properties and grabbing the resulting CSS, the Online Tool Store Flexbox Playground gives you a live sandbox.