CSS свойство justify-content

Определение и применение

Свойство justify-content распределяет свободное место по главной оси Flexbox или строчной оси Grid.

Во Flexbox выравниваются элементы внутри каждой линии; в Grid — столбцы сетки целиком. Для элементов внутри ячеек Grid используйте justify-items.

Если flex-grow или автоматические внешние отступы поглотили свободное место, изменение выравнивания может быть незаметным. При flex-direction: column главная ось обычно вертикальная.

Связанные свойства: align-items.

В генераторе Flexbox можно настроить контейнер и размеры его элементов и получить готовый CSS.

Настройте положение всей сетки по горизонтали при наличии свободного места в генераторе Grid. Настройки можно проверить в превью и сохранить как HTML/CSS.

justify-content: сравнение при writing-mode: horizontal-tb и direction: ltr.
flex-start
123
center
123
flex-end
123
space-between
123
space-around
123
space-evenly
123

Попробуйте значения justify-content

Распределяется свободное место вдоль главной горизонтальной оси. Для этого примера элементы специально сделаны узкими.

Значение свойства

justify-content: flex-start

HTML и CSS примера
HTML
<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.item {
  width: 45px;
  min-height: 40px;
  flex-shrink: 0;
}

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

Спецификации: CSS align, CSS flexbox

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.justify-content
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
justify-content✓29✓12✓20✓12.1✓9✓29✓20✓12.1✓9✓2.0✓4.4✓9
В flex-контейнере✓52✓12✓20✓12.1✓7✓52✓20✓12.1✓7✓6.0✓52✓7
left and right✓93✓93✓52✓79✓9✓93✓52×✓9✓17.0✓93✓9
safe and unsafe✓115✓115✓63✓101✓17.6✓115✓63✓77✓17.6✓23.0✓115✓17.6
space-evenly✓60✓79✓52✓47✓11✓60✓52✓44✓11✓8.0✓60✓11
start and end✓93✓93✓45✓79✓15.4✓93✓45✓66✓15.4✓17.0✓93✓15.4
stretch✓57✓79✓52✓44✓9✓57✓52✓43✓9✓7.0✓57✓9
В grid-контейнере✓57✓16✓52✓44✓10.1✓52✓52✓43✓10.3✓6.2✓57✓10.3
left✓21✓79✓20✓15✓7✓25✓20✓14✓7✓1.5✓4.4✓7
normal✓21✓79✓20✓15✓7✓25✓20✓14✓7✓1.5✓4.4✓7
right✓21✓79✓20✓15✓7✓25✓20✓14✓7✓1.5✓4.4✓7

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS
justify-content: normal | stretch | space-between | space-around | space-evenly;
justify-content: [ safe | unsafe ]? [ start | end | center | flex-start | flex-end | left | right ];

/* Глобальные значения */
justify-content: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. ? означает необязательную часть. Квадратные скобки группируют варианты; внутри типа задают допустимый диапазон.

JavaScript:

JavaScript
element.style.justifyContent = "space-between";

Начальное значение свойства

normal.

Значения свойства

Значения justify-content
Значение Описание
normal Во Flexbox обычно действует как flex-start; в Grid — как stretch.
start / end У начального или конечного края по оси выравнивания с учётом направления письма.
center По центру области выравнивания.
flex-start / flex-end Для justify-content во Flexbox — начало или конец главной оси. В остальных рассматриваемых здесь случаях соответствуют start / end; свойства justify-items и justify-self во Flexbox не работают.
left / right У физического левого или правого края. Если ось выравнивания не параллельна строчной оси, действуют как start.
safe / unsafe Модификатор перед позиционным значением. При переполнении safe center переключается к началу, unsafe center сохраняет центрирование. Не применяется к space-*, stretch или baseline.
space-between Равные промежутки между соседними элементами или дорожками; края прижаты к контейнеру. С одним элементом используется выравнивание к началу.
space-around Между соседями свободное место вдвое больше, чем у краёв. С одним элементом — безопасное центрирование.
space-evenly Одинаковое свободное место между соседями и у краёв.
stretch В Grid увеличивает столбцы с размером auto; во Flexbox растягивание по главной оси задаётся через flex, а это значение действует как flex-start.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства justify-content устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Box Alignment — спецификация justify-content.

Наследуется

Нет.

Анимируемое

Дискретно: значение переключается, а не создаёт плавное перемещение элементов.

Примеры, попробуйте сами

Расположение flex-элементов

Попробуйте center, flex-start или space-around. Сравните свободное место между элементами.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.container {
    background: #eef2f5;
    border: 1px dashed #8495a5;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Расположение flex-элементов</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: flex;
    justify-content: space-between;
}
.item {
    width: 44px;
}

Выравнивание всей сетки

Столбцы имеют фиксированную ширину 50px, поэтому остаётся свободное место. Измените space-between на center. Затем задайте 1fr 1fr: столбцы займут доступную ширину, и выравнивание станет незаметным.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color-scheme: light dark;
    background: Canvas;
    color: CanvasText;
}
.item {
    min-width: 0;
    padding: 8px;
    overflow-wrap: anywhere;
    border: 1px solid #447a9b;
    background: light-dark(#e4f0f8, #293e50);
}
.container {
    outline: 1px dashed;
}
section {
    margin-bottom: 24px;
}
h2 {
    font-size: 16px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Выравнивание всей сетки</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: grid;
    grid-template-columns: 50px 50px;
    grid-auto-rows: 50px;
    gap: 8px;
    justify-content: space-between;
}