Lab — Devtool

Flexbox Playground

Flexbox Playground is a free online tool that teaches CSS flexbox by letting you toggle every container and item property — change a value, watch the boxes obey instantly, and copy the exact CSS into your own project. No account, nothing leaves the page.

Container

flex-direction

justify-content

align-items

flex-wrap

align-content

Items (1–8)

Gap: 16px

Live preview — click a box to select it

Change any control and the preview, the CSS below, and this note update together.

Selected item (none yet — click a box)

flex-grow (0–3)

flex-shrink (0–2)

flex-basis

align-self

Generated CSS

Flexbox in 60 seconds

The main axis follows flex-direction (row = left to right). justify-content spreads items along it; align-items aligns them across it.
With wrap on, align-content spreads whole rows; with nowrap it does nothing — that is why it only matters once items wrap.
flex-grow lets an item take a share of leftover space; flex-basis is its starting size before growing or shrinking. align-self overrides align-items for one item only.