Home >CSS >CSS reference – properties, selectors, functions >justify-content

justify-content

Distributes the items of a flex container along the main axis (horizontally with flex-direction: row) – it shares out the free space left over by the items. In a grid it distributes the whole grid columns in the same way.

Values

normal – the default: like flex-start in flexbox, like stretch in grid.
flex-start / start – at the start; flex-end / end – at the end. (The difference shows only in a reversed direction: flex-start follows the flexbox direction, start the text direction.)
center – in the center.
space-between – the first at the start, the last at the end, equal gaps between them.
space-around – an equal space around each item (so half the space at the edges).
space-evenly – all gaps including the edges equal.

You can write safe before the value (safe center): when the items do not fit, they align to the start so that they do not end up outside the visible area.

Initial value: normal. Inherited: no. Applies to: flex and grid containers (and multi-column text).

Examples

Three items with different values:

<div class="flex start"><div>1</div><div>2</div><div>3</div></div>
<div class="flex center"><div>1</div><div>2</div><div>3</div></div>
<div class="flex end"><div>1</div><div>2</div><div>3</div></div>
<div class="flex between"><div>1</div><div>2</div><div>3</div></div>
<div class="flex around"><div>1</div><div>2</div><div>3</div></div>
<div class="flex evenly"><div>1</div><div>2</div><div>3</div></div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex { max-width: 300px; margin-bottom: 6px; }
.start { justify-content: flex-start; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.between { justify-content: space-between; }
.around { justify-content: space-around; }
.evenly { justify-content: space-evenly; }

result

A header with the logo on the left and the menu on the right:

<header class="header">
  <strong>Logo</strong>
  <nav>Home · Articles · Contact</nav>
</header>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 340px;
  padding: 8px 12px;
  background: #333;
  color: #fff;
}

result

Logo

Things to watch out for

It works only on free space. When the items have flex-grow and use up the space, there is nothing to distribute and the value has no effect.
To push one item to the end of the line (the rest at the start), margin-left: auto on that item is better.
center on overflow also moves the items to the left outside the container, where you cannot scroll to them. safe center helps.
On the last line with wrapping, space-between creates “holes” (two items at the edges). For a grid of equal cards, grid or gap with flex-start is better.

Browser support

Baseline – widely available: in all major browsers since September 2015, considered widely available since March 2018. Since version: Chrome 29, Firefox 20, Safari 9. As of October 2026 (MDN browser-compat-data).