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.
Flexbox, learned by moving the controls
Flexbox lays items out along a single axis, and most of the confusion comes from the interplay of its properties: justify-content distributes space along the main axis, align-items positions on the cross axis, and the meaning of both flips when you switch flex-direction from row to column. Reading the spec rarely makes this click; watching boxes move does.
Change any control here and the container rearranges live, with varied box sizes so the alignment effects are obvious, then copy the finished rule. When your layout needs two dimensions — rows and columns together — reach for the grid generator instead, and the grid-to-flex converter shows the two approaches to the same layout side by side.
Common use cases
- Navigation bars — space links with justify-content and center them vertically.
- Centering — settle the classic center-a-box problem in one rule.
- Toolbars — push actions to opposite ends with space-between.
- Wrapping chips — let tags flow onto new lines with flex-wrap.
- Learning flexbox — see exactly what each property does before committing.