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.