Micro Tools

Flexbox Playground

Learn flexbox visually, free. Tweak direction, alignment, wrapping and gaps on a live demo, then copy the generated CSS for your project.

Container settings

flex-direction

justify-content

align-items

flex-wrap

gap (px)

items

Live preview

Generated CSS

Copy this into your stylesheet

How it works

Change any container property: direction, main-axis alignment (justify-content), cross-axis alignment (align-items), wrapping and gap, plus the number of demo items. The preview updates instantly so you can see exactly what each value does, and the CSS panel shows the matching stylesheet block ready to copy into your project.

The mental model

Flexbox lays items along a main axis (controlled by flex-direction and justify-content) and a cross axis (align-items). Start with direction row and justify-content center: the most common centering recipe on the modern web. Toggle wrap on when items should flow onto new lines instead of shrinking.

Flexbox Playground FAQs

How do I center a div with flexbox?

Set display: flex, justify-content: center and align-items: center on the parent. Try it live: pick center for both in the playground.

What is the difference between justify-content and align-items?

justify-content aligns along the main axis (horizontal in a row), align-items along the cross axis (vertical in a row). They work as a pair.

When should I use flex-wrap?

When items should flow onto multiple lines on narrow screens instead of squishing. With nowrap, the default, items shrink to fit one line.

What does the gap property do?

It puts even spacing between flex items without margin hacks. Adjust the gap slider to see it, then copy the value.

Is this good for learning flexbox?

Yes. Seeing each property change the layout live builds intuition far faster than reading definitions.