Flexbox Playground
Learn flexbox visually — flip the properties, watch the layout respond.
How to use Flexbox Playground
- Set the item count to roughly match your real layout.
- Flip the dropdowns — direction, justify-content, align-items, wrap, gap — and watch the response.
- Learn the axis flip: change direction and re-test justify vs align — the core flexbox insight.
- Copy the winning combination into your stylesheet's container rule.
What is Flexbox Playground?
A flexbox playground is an interactive sandbox for CSS's main layout system: dropdowns for flex-direction, justify-content, align-items, flex-wrap and gap, a live container of items that rearranges the instant you change one — the cause-and-effect loop that makes flexbox finally click.
Flexbox's notorious learning hurdle is its axis system: justify-content works along the main axis and align-items along the cross axis — but which is which flips when direction changes from row to column. Reading that sentence rarely teaches it; flipping the dropdown and watching does.
About the Flexbox Playground
Set the container properties and watch numbered items obey: direction row or column, justification from flex-start through space-evenly, alignment, wrapping, gap size and item count — every combination visible immediately.
The experiments that teach the most: set direction to row, walk justify-content through all six values, then switch direction to column and walk them again — the axis flip becomes intuitive in one minute; compare space-between, space-around and space-evenly side by side (the difference in edge spacing that documentation diagrams never quite land); and toggle wrap with a dozen items to see how flex handles overflow.
It doubles as a working reference: recreate the layout you're fighting with, find the property combination that fixes it, and transfer the winning values to your CSS. Centering a div — the eternal question — is justify-content: center; align-items: center, verifiable here in two clicks.