Flexbox Playground
Get flexbox CSS, and see which axis each property is talking about.
What you provide
Result
row, flex-start
Nearly all flexbox confusion comes down to one thing: justify-content works along the main axis and align-items works across it, and setting flex-direction to column swaps which is which. With row, the main axis runs left to right, cross axis runs top to bottom. Two other habits save time later. Items shrink by default, so text can squash below its natural width until you set flex-shrink to 0 or a min-width. And align-content only does anything once flex-wrap is on, because with a single line there is nothing to distribute.
.flex {
display: flex;
gap: 16px;
}- Directionmain axis runs left to right, cross axis runs top to bottom
- row
- justify-contentDistributes along the horizontal axis
- flex-start
- align-itemsPositions across the vertical axis
- stretch
- Wrapping
- nowrap
- Gap
- 16px
What this cannot tell you
- Builds a CSS rule from your choices, in your browser. Nothing is applied to your site.
- Container properties only. How individual items behave also depends on flex-grow, flex-shrink and flex-basis set on the children.
Take this with you
How this calculation works
The generator writes only the properties that differ from their defaults, so you get a clean rule rather than a wall of declarations that mostly do nothing. Alongside it, each property is labelled with the axis it acts on for the direction you chose, because that is where nearly all flexbox confusion comes from: justify-content and align-items swap axes the moment direction is set to column.
What the results mean
- Main axis
- The direction items flow in. justify-content distributes along it. With row it runs horizontally, with column it runs vertically.
- Cross axis
- Perpendicular to the flow. align-items positions across it. The two swap when direction changes, which is the source of most confusion.
- align-content
- Spaces the rows once wrapping is on. With a single line there is nothing to distribute, so it appears to do nothing until flex-wrap is set.
Common problems and fixes
- align-items does nothing
- Almost always because the container has no cross-axis size to align within. In a row, that means the container has no height beyond its content, so every item is already the full height. Give the container a height, or check whether you actually wanted justify-content, which acts on the other axis.
- Text or images squash instead of wrapping
- Flex items shrink below their content size by default, which surprises everyone once. Set flex-shrink: 0 on the item that should keep its size, or give it a min-width. For text specifically, min-width: 0 on the flex item is often the fix instead, since the default minimum size prevents it from shrinking enough to wrap.
Frequently asked questions
How do I centre something both ways?
Set justify-content and align-items both to center on the container. That centres along both axes regardless of direction. The container needs a size on the cross axis for the second one to have any effect, which is why this sometimes appears to only half work.
What is the difference between space-around and space-evenly?
space-around gives each item equal space on both sides, so the gaps between items end up twice the size of the gaps at the ends. space-evenly makes every gap identical, including the outer ones, which is usually what people expected from space-around.
Should I use gap or margins?
Gap, wherever it works. It applies only between items, never at the edges, so it needs no negative-margin trick on the container and no last-child override. Support is universal in current browsers.
Put this on your own site
Free to embed, no attribution required beyond the source link the frame carries itself. It runs entirely in your visitor's browser, sets no cookies and loads no third-party script.
<iframe src="https://runthetests.com/embed/flexbox-generator/" width="100%" height="560" style="border:1px solid #e5e5e5;border-radius:8px" title="Flexbox Playground" loading="lazy"></iframe>
Preview it at https://runthetests.com/embed/flexbox-generator/. Embedded pages are marked noindex, so yours stays the canonical copy — not this one.