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;
}Overview
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.
Everything on this screen is a container property, set on the parent. That is the right mental split: the parent decides direction, wrapping and how the group is distributed, while each child decides how it grows or shrinks within that. Most layouts are solved from the parent, which is why this is where to build the intuition first.
Step by step
- 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.
Notes
- The main axis is whichever way flex-direction points; the cross axis is perpendicular to it. Almost every flexbox confusion comes from forgetting that both alignment properties are defined against those axes, not against the screen.
- flex-wrap is off by default, so items shrink to share one line rather than wrapping. Turn it on and align-content, which spaces the wrapped lines apart, finally has something to do.
- The container properties here position the group, but each item's own flex-grow, flex-shrink and flex-basis decide how the leftover space is divided. When one item refuses to behave, that is usually where to look.
FAQ
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.
What is the default flex-direction?
row, which lays items out left to right. That is why justify-content moves things horizontally until you switch the direction to column.