CSS Flexbox Playground
Visually test and debug CSS flexbox layouts. Adjust justify-content, align-items, flex-direction, and flex-wrap with instant CSS code generation.
gap: {{ gap }}px
Item Count: {{ itemsCount }}
{{ n }}
CSS Rules
Flexbox creates 1-dimensional layouts. `justify-content` manages alignment along the main axis, while `align-items` governs alignment across the cross axis. Toggle options above to see immediate dynamic reordering.
Try other tools
Have an issue or feature request for this tool?
Feedback & Suggestions