Исполняемые доки CSS: justify-content CSS

Q: Чем justify-content отличается от align-items?

justify-content распределяет элементы вдоль главной оси, в направлении их потока (по горизонтали при flex-direction: row). align-items размещает их вдоль поперечной оси (по вертикали в строке). В колонке оба меняются местами: justify-content становится вертикальным.

Q: Чем отличаются space-between, space-around и space-evenly?

space-between не ставит пространство перед первым элементом и после последнего, а остальное делит между элементами. space-around дает каждому элементу равное пространство с обеих сторон, поэтому края получают половину промежутка. space-evenly делает все промежутки равными, включая края.

Q: Что делает align-self?

align-self переопределяет align-items контейнера для одного элемента. Например, align-self: flex-end у одного дочернего элемента сдвигает только его в конец поперечной оси, а остальные остаются там, куда их поставил align-items.

Q: Есть ли justify-self во flexbox?

Нет. Flexbox игнорирует justify-self, потому что главная ось общая для всех элементов. Чтобы сдвинуть один элемент вдоль главной оси, используйте auto-отступ, например margin-inline-start: auto. justify-self работает в grid.

justify-content и align-items одним предложением

Во flex-контейнере justify-content распределяет элементы вдоль главной оси (вдоль строки), а align-items выравнивает их по поперечной оси (вверх и вниз в строке). Оба задаются контейнеру:

<!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>

Блок центрирован в обоих направлениях: на одинаковом расстоянии от начального и конечного краев, а также от верха и низа. Уберите height: 140px, и align-items: center будет нечего делать, потому что контейнер сожмется до высоты самого элемента.

Все значения justify-content с замерами

Каждая строка ниже это те же три элемента с разным justify-content. Числа в подписи над каждой строкой это промежутки, которые оставил браузер: перед первым элементом, между элементами и после последнего.

<!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>

Контейнер шириной 420px, а элементы занимают 180px, значит, свободного пространства 240px. Куда оно уходит:

Значение	Свободное пространство уходит	Промежутки в примере
`flex-start` (и `start`)	все после элементов	0 / 0 / 0 / 240
`center`	половина до, половина после	120 / 0 / 0 / 120
`flex-end` (и `end`)	все перед элементами	240 / 0 / 0 / 0
`space-between`	только между элементами	0 / 120 / 120 / 0
`space-around`	поровну с обеих сторон каждого элемента, поэтому краям половина	40 / 80 / 80 / 40
`space-evenly`	все промежутки равны, включая края	60 / 60 / 60 / 60

flex-start следует направлению flex, а start направлению письма. Они различаются только при row-reverse или column-reverse, где flex-start оказывается на обратном конце.

Все значения align-items

align-items работает поперек строки. У элементов ниже разная высота, чтобы было видно, что с ними делает каждое значение:

<!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>

Значение	Что происходит на поперечной оси
`stretch` (по умолчанию)	Элементы без заданной высоты растягиваются на весь контейнер
`flex-start` (и `start`)	Элементы стоят сверху, со своей высотой
`center`	Элементы центрированы, со своей высотой
`flex-end` (и `end`)	Элементы стоят снизу
`baseline`	Элементы сдвигаются так, чтобы первые строки текста стояли на одной базовой линии

В блоке baseline три подписи «Ag» стоят на одной линии, хотя первая крупнее, а у второй сверху padding. Это значение для строки, где крупный заголовок соседствует с мелким текстом или подпись с полем ввода.

Кликните, чтобы выровнять

Кликните по любой клетке сетки 3 на 3. Блок переместится туда, а ниже появится CSS, который его туда ставит:

<!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>

Строки выбора меняют align-items, а колонки justify-content. Средняя клетка это классическое «выровнять div по центру».

В колонке они меняются местами

justify-content всегда следует главной оси. При flex-direction: column главная ось вертикальная, поэтому justify-content двигает элементы вверх и вниз, а align-items поперек:

<!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>

Если перепутали, поменяйте два свойства местами, а не переписывайте раскладку.

align-self и auto-отступы: только один элемент

align-self у элемента переопределяет align-items для этого элемента. justify-self во flexbox нет; чтобы сдвинуть один элемент вдоль главной оси, задайте ему auto-отступ, который забирает все свободное пространство с этой стороны:

<!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>

Зеленый элемент сам опускается вниз, а янтарный отодвигается в дальний конец строки, пока остальные остаются в начале.

Когда строк несколько: align-content

align-items выравнивает элементы внутри их строки. Когда контейнер переносит элементы на несколько строк, align-content распределяет сами строки и принимает те же значения, что justify-content. В контейнере nowrap он ничего не делает: единственная строка там всегда заполняет высоту контейнера. Это показано на странице про flex-wrap.

Частые ошибки

Путаница осей. justify-content это направление потока, align-items поперек него. В колонке вертикальное центрирование это justify-content: center.
Нет свободного пространства. Элемент с flex: 1 забирает все пространство, и justify-content нечего распределять. То же бывает, когда контейнер inline-flex и шириной ровно с элементы.
Нет высоты для align-items. Контейнер высотой с содержимое не оставляет места для выравнивания. Задайте height или min-height.
Поиск justify-self во flexbox. Там он игнорируется. Используйте у элемента margin-inline-start: auto (или margin-left: auto).
align-items: stretch, который не растягивает. Элемент с собственной height ее сохраняет. Уберите высоту (используйте min-height, если нужен минимум).
Свойства у элементов. Оба задаются flex-контейнеру. Только align-self задается элементу.

Часто задаваемые вопросы

Чем justify-content отличается от align-items?

justify-content распределяет элементы вдоль главной оси, в направлении их потока (по горизонтали при flex-direction: row). align-items размещает их вдоль поперечной оси (по вертикали в строке). В колонке оба меняются местами: justify-content становится вертикальным.

Чем отличаются space-between, space-around и space-evenly?

space-between не ставит пространство перед первым элементом и после последнего, а остальное делит между элементами. space-around дает каждому элементу равное пространство с обеих сторон, поэтому края получают половину промежутка. space-evenly делает все промежутки равными, включая края.

Почему не работает justify-content?

Обычно нет свободного пространства для распределения: у элемента flex-grow или flex: 1, или контейнер шириной ровно с элементы (например, display: inline-flex или плавающий контейнер). Также проверьте, что display: flex задан родителю, а не элементам.

Почему align-items center не центрирует по вертикали?

Скорее всего, контейнер ровно такой высоты, как содержимое, и центрировать негде. Задайте flex-контейнеру высоту или min-height, и элементы переместятся в его середину.

Что делает align-self?

align-self переопределяет align-items контейнера для одного элемента. Например, align-self: flex-end у одного дочернего элемента сдвигает только его в конец поперечной оси, а остальные остаются там, куда их поставил align-items.

Есть ли justify-self во flexbox?

Нет. Flexbox игнорирует justify-self, потому что главная ось общая для всех элементов. Чтобы сдвинуть один элемент вдоль главной оси, используйте auto-отступ, например margin-inline-start: auto. justify-self работает в grid.

Связанные концепции

justify-content и align-items в CSS: все значения