Flexbox Playground
Set flex-direction, wrap, justify-content, align-items and gap, watch the boxes move, and copy the CSS or Tailwind.
Set every flex property and watch the boxes move, then copy the CSS or the Tailwind classes.
Layout
align-items works across the cross axis, so it moves items vertically in a row and horizontally in a column. Switch flex-direction and watch justify-content and align-items swap which way they push.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
}About the flexbox playground
Flexbox is easy to use and hard to remember, because justify-content and align-items swap which direction they push the moment you change flex-direction. Reading that in documentation never sticks; watching it happen does.
Change flex-direction from row to column here and the two alignment properties visibly trade places. That single interaction explains the model better than any diagram.
How to use it
- 1Set the number of items and the gap.
- 2Change flex-direction and watch the alignment properties swap axes.
- 3Try each justify-content and align-items value.
- 4Copy the CSS or the Tailwind classes.
Questions
What is the difference between justify-content and align-items?
justify-content works along the main axis, the direction flex-direction points. align-items works across it. Switch to column and they swap which way they move things.
Why does align-items: stretch do nothing sometimes?
It only stretches items that have no fixed size on the cross axis. An item with an explicit height will not stretch in a row.
When should I use grid instead?
Flexbox lays out in one direction. If you need rows and columns to line up together, that is a two dimensional problem and grid is the right tool.
Does gap work in flexbox everywhere?
Yes, in every current browser. It replaced the old margin trick, which needed a negative margin on the container to cancel the outer edges.