📐 Flexbox Playground & Generator

Adjust the container's flex properties and each item's grow/shrink/basis/order, watch the live flexbox preview update, and copy the generated CSS.

1. Container

flex-direction

flex-wrap

justify-content

align-items

align-content (needs flex-wrap: wrap and extra vertical space)

gap (px)

2. Live preview

3. Items

Each item's flex-grow, flex-shrink, flex-basis and order.

Item	flex-grow	flex-shrink	flex-basis	order

4. CSS output