Runnable CSS Docs: Justify Content

Q: What is the difference between justify-content and align-items?

justify-content distributes items along the main axis, the direction they flow in (horizontal for flex-direction: row). align-items positions them along the cross axis (vertical for a row). In a column both swap: justify-content becomes vertical.

Q: What is the difference between space-between, space-around and space-evenly?

space-between puts no space before the first item or after the last and splits the rest between items. space-around gives every item equal space on both sides, so the edges get half a gap. space-evenly makes every gap equal, the edges included.

Q: Why is justify-content not working?

Usually there is no free space to distribute: an item has flex-grow or flex: 1, or the container is only as wide as its items (for example display: inline-flex or a floated container). Also check that display: flex is on the parent, not the items.

Q: What does align-self do?

align-self overrides the container's align-items for one item. For example align-self: flex-end on one child moves only that child to the end of the cross axis while the others stay where align-items put them.

Q: Is there a justify-self in flexbox?

No. Flexbox ignores justify-self, because the main axis is shared by all items. To push one item along the main axis, use an auto margin, such as margin-inline-start: auto. justify-self works in grid.

justify-content and align-items in one sentence each

In a flex container, justify-content spreads the items along the main axis (across the row) and align-items lines them up on the cross axis (up and down the row). Both go on the container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

The box is centered both ways: the same distance from the start and end edges, and from the top and bottom. Take height: 140px away and align-items: center has nothing to do, because the container shrinks to the item's own height.

Every justify-content value, measured

Each row below is the same three items with a different justify-content. The numbers in the label above each row are the gaps the browser left: before the first item, between items, and after the last.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

The container is 420px and the items take 180px, so there are 240px of free space. Where it goes:

Value	Free space goes	Gaps in the demo
`flex-start` (and `start`)	all after the items	0 / 0 / 0 / 240
`center`	half before, half after	120 / 0 / 0 / 120
`flex-end` (and `end`)	all before the items	240 / 0 / 0 / 0
`space-between`	only between items	0 / 120 / 120 / 0
`space-around`	equal on both sides of each item, so edges get half	40 / 80 / 80 / 40
`space-evenly`	every gap equal, edges included	60 / 60 / 60 / 60

flex-start follows the flex direction and start follows the writing direction. They only differ with row-reverse or column-reverse, where flex-start is at the reversed end.

Every align-items value

align-items works across the row. The items below have different heights so you can see what each value does with them:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

Value	What happens on the cross axis
`stretch` (the default)	Items without a set height grow to fill the container
`flex-start` (and `start`)	Items sit at the top, at their own height
`center`	Items are centered, at their own height
`flex-end` (and `end`)	Items sit at the bottom
`baseline`	Items move so the first lines of text share one baseline

In the baseline box the three "Ag" labels sit on one line even though the first is larger and the second has padding above it. That is the value for a row mixing a big heading with small text, or a label with an input.

Click to align

Click any cell of the 3 by 3 grid. The box moves there, and the CSS that puts it there is printed below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

The rows of the picker change align-items and the columns change justify-content. The middle cell is the classic "center a div".

In a column, the two swap

justify-content always follows the main axis. With flex-direction: column the main axis is vertical, so justify-content moves items up and down and align-items moves them across:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

If you mix them up, swap the two properties rather than rewriting the layout.

align-self and auto margins: one item only

align-self on an item overrides align-items for that item. There is no justify-self in flexbox; to move one item along the main axis, give it an auto margin, which takes all the free space on that side:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

The green item drops to the bottom on its own, and the amber item is pushed to the far end of the row while the others stay at the start.

When there are several lines: align-content

align-items aligns items inside their line. When a container wraps onto several lines, align-content spaces the lines themselves, and takes the same values as justify-content. It does nothing in a nowrap container, whose one line always fills the container's height. The flex-wrap page shows it.

Common mistakes

Mixing up the axes. justify-content is the flow direction, align-items is across it. In a column, vertical centering is justify-content: center.
No free space. An item with flex: 1 takes all the space, so justify-content has none to distribute. The same happens when the container is inline-flex and exactly as wide as its items.
No height for align-items. A container as tall as its content leaves nothing to align. Set a height or min-height.
Looking for justify-self in flexbox. It is ignored there. Use margin-inline-start: auto (or margin-left: auto) on the item.
align-items: stretch that does not stretch. An item with its own height keeps it. Remove the height (use min-height if it needs a minimum).
Putting the properties on the items. Both go on the flex container. Only align-self goes on an item.

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content distributes items along the main axis, the direction they flow in (horizontal for flex-direction: row). align-items positions them along the cross axis (vertical for a row). In a column both swap: justify-content becomes vertical.

What is the difference between space-between, space-around and space-evenly?

space-between puts no space before the first item or after the last and splits the rest between items. space-around gives every item equal space on both sides, so the edges get half a gap. space-evenly makes every gap equal, the edges included.

Why is justify-content not working?

Usually there is no free space to distribute: an item has flex-grow or flex: 1, or the container is only as wide as its items (for example display: inline-flex or a floated container). Also check that display: flex is on the parent, not the items.

Why is align-items center not centering vertically?

The container is probably exactly as tall as its content, so there is nothing to center within. Give the flex container a height or min-height, and the items will move to its middle.

What does align-self do?

align-self overrides the container's align-items for one item. For example align-self: flex-end on one child moves only that child to the end of the cross axis while the others stay where align-items put them.

Is there a justify-self in flexbox?

No. Flexbox ignores justify-self, because the main axis is shared by all items. To push one item along the main axis, use an auto margin, such as margin-inline-start: auto. justify-self works in grid.

Related concepts