Справочник · CSS

justify-content: распределение места по главной оси

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Свойство justify-content распределяет свободное место между элементами вдоль главной оси flex-контейнера или между колонками grid-сетки: прижимает элементы к началу или концу, ставит по центру, раздвигает по краям. Его пишут контейнеру, и оно заметно, только когда у контейнера есть свободное место.

Минимальный пример

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<header class="header">
  <a class="logo" href="/">Praktum</a>
  <nav>…</nav>
</header>

Логотип прижат к левому краю, меню — к правому, свободное место между ними. Это самый частый случай использования justify-content.

Значения justify-content

start и end учитывают направление письма, а flex-start и flex-end — направление flex-оси. В обычной горизонтальной строке на русском они совпадают.

Главная ось и flex-direction

.stack {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* теперь центрирует по вертикали */
  min-height: 100dvh;        /* нужна высота, иначе свободного места нет */
}

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

Почему justify-content ничего не делает

Свойство распределяет только свободное место. Если элементы занимают весь контейнер (например, у них flex: 1 или flex-grow), распределять нечего. В колонке без заданной высоты контейнер равен сумме высот детей — вертикальное центрирование тоже не сработает. Проверь в DevTools, есть ли у контейнера лишнее место.

Один элемент к другому краю: margin-left: auto

.header { display: flex; align-items: center; gap: 16px; }
.header .login { margin-left: auto; } /* только кнопка уезжает вправо */

justify-content двигает всех сразу. Если нужно прижать вправо только последний элемент (кнопку «Войти»), а остальные оставить слева рядом, используй margin-left: auto на этом элементе: автоматический отступ забирает всё свободное место.

justify-content в Grid

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;   /* вся сетка по центру контейнера */
  gap: 16px;
}

В Grid свойство двигает не отдельные элементы, а все колонки целиком — когда их суммарная ширина меньше контейнера. Чтобы выровнять содержимое внутри ячеек, нужен justify-items, а для одного элемента — justify-self.

space-between или gap

.tags { display: flex; flex-wrap: wrap; gap: 8px; }          /* стабильные промежутки */
.tags { display: flex; flex-wrap: wrap; justify-content: space-between; } /* «разбегаются» */

space-between хорош, когда первый и последний элемент должны касаться краёв. Для групп кнопок, тегов и карточек с переносом он плох: в последней строке два элемента разъедутся по краям с огромной дырой посередине. Там нужен gap — фиксированный промежуток.

Ключевое слово safe

.row { display: flex; justify-content: safe center; }

Если содержимое шире контейнера, center выталкивает его за обе стороны, и левую часть нельзя даже прокрутить. safe center в этом случае прижимает содержимое к началу. Ключевое слово поддерживается в актуальных версиях браузеров.

justify-content или align-items

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

• Пишут justify-content обычному блоку без display: flex или grid.
• Ждут эффекта, когда у элементов flex-grow и свободного места нет.
• Путают оси: при flex-direction: column justify-content работает вертикально.
• Используют space-between для тегов с переносом вместо gap.
• Центрируют колонкой без заданной высоты контейнера.

Доступность

justify-content меняет только положение, а не порядок: клавиатура и скринридер идут по HTML. Значения с -reverse в flex-direction и визуальные перестановки могут запутать человека с клавиатурой — держи порядок в HTML логичным.

Поддержка браузерами

justify-content во Flexbox и Grid поддерживается всеми актуальными браузерами. space-evenly во Flexbox, значения start/end и ключевое слово safe работают в современных версиях.

.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }