Flexbox Playground

Experiment with flexbox visually and copy the generated CSS for your layout.

flex-direction:

justify-content:

align-items:

flex-wrap:

gap: 12px

Boxes: 4

Live preview:

Generated CSS:

How to use

Tweak direction, alignment and gap, watch the live boxes, then copy the CSS. Everything runs in your browser.

Do I need to know flexbox?

No — change the dropdowns and watch the boxes move, then copy the CSS.

Is the CSS production-ready?

Yes — clean flex container CSS you can paste into any project.

☕

Every tool runs 100% in your browser — no uploads, no signups. If a tool saved you time, consider supporting us with a small donation.