CSS Flexbox playground

Click the Flexbox properties and watch the boxes rearrange in real time — then copy the container CSS. A fast way to learn flex and grab the exact code. Nothing is sent anywhere.

flex-direction

justify-content

align-items

flex-wrap

Gap12px

Number of items5

Live preview

Container CSS

Everything runs in your browser. No upload, no sign-up.

How it works

STEP 1

Pick your properties

Tap flex-direction, justify-content, align-items and wrap. Drag the gap and item count.

STEP 2

Watch the live preview

The boxes rearrange instantly so you can see exactly what each Flexbox property does.

STEP 3

Copy the CSS

Grab clean container CSS with one click, or download a .css file — nothing is uploaded.