CSS LabCSS flexbox generator
Flexbox lines items up in one direction. Change a property and watch the boxes move.
The two axes
Everything in flexbox depends on two directions. The main axis is the direction items are laid out in, set by flex-direction: row runs left to right, column runs top to bottom, and the two -reverse values flip it. The cross axis is the other direction.
| Property | Works along | What it does |
|---|---|---|
justify-content | main axis | Spreads items along the line: start, centre, end, or with space between, around or evenly |
align-items | cross axis | Places each item across the line: stretch (the default), start, centre, end or on a text baseline |
align-content | cross axis | Only matters when items wrap onto several lines: how the lines sit in the container |
gap | both | Space between items, without margins on the items |
flex-wrap | Whether items stay on one line or wrap onto more |
Reading the preview
The boxes have different sizes on purpose, so you can see what stretch and baseline do. If you choose column, the container needs a height for justify-content to have anything to spread, which is why the preview box has a fixed height. In your own page, a column container with no set height is only as tall as its content.
Common mistakes
- Putting
justify-contenton the items instead of the container. All the properties in this tool go on the parent. - Expecting
align-contentto do something on a single line. It only works when there are several lines (setflex-wrap: wrapand have enough items). - Using margins for spacing when
gapis simpler.
Does gap work in flexbox on all browsers?
We tested it in current Chrome and WebKit on 13 November 2026 and it worked in all three. Very old browsers may not support it.
What is the difference between space-around and space-evenly?
Space-around gives each item the same space on both sides, so the gaps between items are twice the gap at the ends. Space-evenly makes every gap the same, including the ends.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.