Flexbox Playground
Adjust flexbox properties and watch the layout respond immediately. Flexbox is far easier to learn by manipulation than by reading definitions, because the property names only make sense once you have seen what they do.
Free, no signupRuns entirely in your browser
Input
Result
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}About
What the Flexbox Playground does
The concept that unlocks it is the axis. justify-content works along the main axis and align-items along the cross axis — but which is which depends on flex-direction. Switch direction from row to column and the two properties swap roles entirely, which is the single most common source of confusion.
How it works
Using the Flexbox Playground
- 1Set flex-direction to row or column to establish the main axis.
- 2Use justify-content to distribute items along that main axis.
- 3Use align-items to position items across the cross axis.
- 4Toggle flex-wrap to control whether items overflow or wrap.
- 5Copy the resulting CSS.
Use cases
What people use it for
- Learning flexbox by direct experimentation
- Working out the right property for a stubborn layout
- Building a navigation bar or centred hero
- Teaching CSS layout
FAQ
Frequently asked questions
6 related
All tools →