Flexbox generator

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
</div>

<div class="flex flex-row flex-nowrap justify-between items-center gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

How flexbox shares out the space

Flexbox lays items in a row (or a column) along the main axis. Each item starts at its flex-basis — its width in a row, unless you set one, its own width. Then:

• Space left over goes to flex-grow. Three items with a 100px basis in a 600px row leave 300px. With flex-grow 1, 1 and 2 that splits 75 / 75 / 150, so the items end up 175px, 175px and 250px wide.
• Missing space comes from flex-shrink × basis. Items of 300px and 100px in a 300px row are 100px too wide. Both have flex-shrink: 1, but the bigger one gives up three times as much: they end at 225px and 75px, not 250px and 50px.
• justify-content places whatever space is still free along the main axis; align-items places each item across it, and align-self overrides that for one item.
• flex-wrap: wrap starts a new line when the next item's basis doesn't fit. Only then does align-content do anything: it places the lines the way justify-content places items.
• gap only goes between items and lines, never around the outside. gap: 8px 24px is the row gap first, then the column gap.

How we test it

The CSS and HTML are pasted, exactly as you would copy them, into Chrome for 491 different layouts at a phone and a desktop size, and every item's box is measured (8,200 item boxes). In 904 of those layouts every box must match our own step-by-step model of the flexbox rules to half a pixel — the grow and shrink examples above are two of them. The preview on this page must lay out exactly like the copied CSS, and the Tailwind classes, compiled with Tailwind CSS 4.3.3, must lay out exactly like the plain CSS.

Questions

Why doesn't my item shrink below its text?

A flex item won't shrink below its content's minimum width — usually the longest word — because its min-width is auto. Set min-width: 0 (or overflow: hidden) on the item to let it shrink further.

What is the difference between flex: 1 and flex-grow: 1?

flex: 1 is short for flex: 1 1 0%: the basis drops to zero, so every item with flex: 1 ends up the same size whatever is inside it. flex-grow: 1 keeps the basis at auto, so items keep their content width and share out only the space that is left. This page always writes all three values, so you can see which one you have.

How do I center a div with flexbox?

On the parent: display: flex; justify-content: center; align-items: center;. The parent needs a height for the vertical centring to show — try the Center it layout above.

What happens when the items don't fit?

With flex-wrap: nowrap and flex-shrink: 0 they overflow the container. In Chrome, space-between, space-around and space-evenly then line the items up from the left (or top) edge instead of spreading them — even in a -reverse direction — while center lets them spill out of both sides. The same goes for lines and align-content. Our tests measure this, so the preview shows what your browser will do.

Flexbox or grid?

Flexbox lays things out in one direction and lets the content decide the sizes — navbars, button rows, a sidebar next to main content. Grid lays out rows and columns together and is better when things have to line up both ways; try the CSS grid generator.

What do the Tailwind classes need?

Tailwind CSS v4. Gaps use the spacing scale where the pixel value is a multiple of 4; a flex-basis other than 0 or auto is an arbitrary value such as basis-[200px].

Turn existing CSS into classes with the CSS to Tailwind converter, or shape the items with the clip-path generator.