CSS Flexbox Playground

Live flexbox playground. Pick flex-direction, justify-content, align-items, gap, flex-wrap; see results immediately on real boxes. Add or remove items to test how the container behaves. Copy the generated CSS.

How to use the CSS Flexbox Playground

Adjust any control to see the flex container rearrange. Boxes have varied widths/heights so you can see the effect of align-items clearly. Output is the complete display: flex rule for the container.