What's the difference between justify-content and align-items?

justify-content positions items along the main axis (the direction flex-direction points). align-items positions them along the cross axis (perpendicular to the main axis). Together they give you full 2D control.

When should I use flex-wrap?

Whenever you have a variable number of items that should reflow on smaller screens — tag clouds, chip rows, photo galleries. Use wrap-reverse for right-to-left layouts.

Why is space-evenly different from space-around?

space-around adds half-gaps at the edges, so items have equal space around each one but less at the container edges. space-evenly adds full gaps everywhere, including edges, for a more balanced look.

How does align-items: baseline work?

It aligns items along their text baseline, which is useful when items have different font sizes and you want their text to line up — like a row of mixed-size badges.

Can I control individual items?

The playground focuses on container properties. To control individual items, add `flex: 1`, `align-self`, `order` or `flex-grow` to the child elements in your own stylesheet.

Is the CSS prefix-free?

Yes — flexbox has been unprefixed in all modern browsers since 2017. The output works as-is on Chrome, Safari, Firefox and Edge.

Flexbox Playground

Tune flex-direction, justify, align, wrap & gap — copy container CSS live.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Flexbox Playground

Follow these steps — everything happens instantly in your browser.

1
Step 1. Pick flex-direction (row, row-reverse, column, column-reverse).
2
Step 2. Choose justify-content and align-items to position items on each axis.
3
Step 3. Toggle flex-wrap (nowrap / wrap / wrap-reverse).
4
Step 4. Adjust the gap and add or remove preview items (1–10).
5
Step 5. Copy the container CSS into your stylesheet.

Why use this tool

Private by design

All processing happens locally in your browser. Open DevTools → Network and you'll see zero file uploads. Ever.

Instant

No upload wait, no queue, no server round-trip. Results appear the moment you drop a file.

Free & unlimited

No accounts, no watermarks, no daily caps. Use it as many times as you like, forever.

Works everywhere

Desktop, tablet or phone — every tool is responsive and installable as a PWA for offline use.

Frequently asked questions

Everything you might want to know about flexbox playground.

Related tools

CSS Grid Generator

Paint named grid areas visually and copy clean grid-template CSS.

Open

Media Query Generator

Scaffold @media blocks for mobile, tablet & desktop with one click.

Open

Clamp Calculator

Build fluid font sizes with clamp() and preview them across viewport widths.

Open

Gradient Generator

Design CSS linear & radial gradients with up to 5 stops — copy-ready.

Open

Want to learn more?

Read our complete Flexbox Playground tutorial with tips, use cases, and FAQs.