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.

CSS
.flex {
  display: flex;
  gap: 16px;
}
Diagnostic telemetry
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

Flexbox Playground on RunTheTests — free browser-based frontend tools, no sign-up.