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

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

Интерактивный пример ниже демонстрирует некоторые значения justify-content с использованием grid-макета.

Попробуйте

justify-content: start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 220px;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  row-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Синтаксис

/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* Overflow alignment (for positional alignment only)*/
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

Значения

Свойство задаётся одним из следующих ключевых слов:

start

Элементы плотно упакованы друг к другу у начального края контейнера выравнивания по главной оси.

end

Элементы плотно упакованы друг к другу у конечного края контейнера выравнивания по главной оси.

flex-start

Элементы плотно упакованы друг к другу у начального края контейнера выравнивания со стороны главного начала flex-контейнера. Это применимо только к элементам flex-макета. Для элементов, не являющихся дочерними элементами flex-контейнера, это значение рассматривается как start.

flex-end

Элементы плотно упакованы друг к другу у конечного края контейнера выравнивания со стороны главного конца flex-контейнера. Это применимо только к элементам flex-макета. Для элементов, не являющихся дочерними элементами flex-контейнера, это значение рассматривается как end.

center

Элементы плотно упакованы друг к другу по центру контейнера выравнивания вдоль главной оси.

left

Элементы плотно упакованы друг к другу у левого края контейнера выравнивания. Если горизонтальная ось свойства не параллельна строчной оси, например когда задано flex-direction: column;, это значение действует как start.

right

Элементы плотно упакованы друг к другу у правого края контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна строчной оси (в grid-контейнере) или главной оси (в flexbox-контейнере), это значение действует как start.

normal

Ведёт себя как stretch, за исключением multicol-контейнеров с отличным от auto значением column-width: в этом случае столбцы принимают заданное значение column-width, а не растягиваются, чтобы заполнить контейнер. Поскольку в flex-контейнерах stretch ведёт себя как start, normal также ведёт себя как start.

space-between

Элементы равномерно распределяются внутри контейнера выравнивания вдоль главной оси. Расстояние между каждой парой соседних элементов одинаково. Первый элемент прилегает к краю главного начала, а последний — к краю главного конца.

space-around

Элементы равномерно распределяются внутри контейнера выравнивания вдоль главной оси. Расстояние между каждой парой соседних элементов одинаково. Пустое пространство перед первым и после последнего элемента равно половине расстояния между каждой парой соседних элементов. Если элемент только один, он будет расположен по центру.

space-evenly

Элементы равномерно распределяются внутри контейнера выравнивания вдоль главной оси. Расстояние между каждой парой соседних элементов, между краем главного начала и первым элементом, а также между краем главного конца и последним элементом совершенно одинаково.

stretch

Если суммарный размер элементов вдоль главной оси меньше размера контейнера выравнивания, размеры элементов размером auto равномерно увеличиваются (не пропорционально), при этом соблюдаются ограничения, заданные свойствами max-height/max-width (или эквивалентной функциональностью), так что суммарный размер точно заполняет контейнер выравнивания вдоль главной оси.

Примечание: В flexbox-контейнерах значение stretch действует как flex-start или start. Это связано с тем, что в flexbox растяжение регулируется свойством flex-grow.

safe

Если элемент выходит за границы контейнера выравнивания, он выравнивается так, как если бы режим выравнивания был start. Желаемое выравнивание применено не будет.

unsafe

Желаемое выравнивание будет применено, даже если элемент выходит за границы контейнера выравнивания. В отличие от safe, при котором желаемое выравнивание игнорируется, чтобы предотвратить переполнение.

Описание

Определённое в модуле выравнивания блоков CSS свойство justify-content применяется к multicol-, flex- и grid-контейнерам. Свойство не применяется к блочным контейнерам и не оказывает на них влияния.

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

В flex-макетах свойство задаёт распределение свободного пространства между flex-элементами или вокруг них вдоль главной оси. Это свойство влияет на пространство между элементами в строке, а не на пространство между строками. Выравнивание выполняется после применения размеров и автоматических полей. Это означает, что если у одного или нескольких flex-элементов в строке коэффициент flex-grow больше 0, свойство не оказывает влияния, поскольку в этой строке нет пространства для распределения. Кроме того, поскольку растяжение вдоль главной оси регулируется свойством flex, значение stretch действует как flex-start.

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

Растягиваться с помощью свойств align-content и justify-content могут только дорожки сетки размера auto (и только дорожки размера auto). Поэтому по умолчанию дорожка размером auto занимает всё оставшееся пространство grid-контейнера. Чтобы пространство можно было распределить, строчный размер сетки должен быть меньше строчного размера grid-контейнера; в противном случае свойство не оказывает влияния.

Формальное определение

Формальный синтаксис

justify-content = 
  normal |
  <content-distribution> |
  <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = 
  space-between |
  space-around |
  space-evenly |
  stretch

<overflow-position> = 
  unsafe |
  safe

<content-position> = 
  center |
  start |
  end |
  flex-start |
  flex-end

Примеры

Пример простой сетки

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

HTML

Контейнер <section>, который станет нашим grid-контейнером, содержит 16 вложенных элементов <div>, которые станут элементами сетки.

<section class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>

CSS

.container {
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

Мы задаём ширину контейнера 500px и указываем три столбца шириной 80px каждый. Это означает, что для распределения между ними или вокруг них доступно 260px. Затем мы задаём justify-content: space-evenly, то есть перед каждым столбцом, между столбцами и после них будет 65px пространства.

Мы задаём разную ширину (и фоновый цвет), чтобы продемонстрировать, как выравниваются столбцы.

.container {
  display: grid;
  grid: auto-flow / repeat(3, 80px);
  width: 500px;
  justify-content: space-evenly;
}

div {
  background-color: pink;
  width: 80px;
}

div:nth-of-type(n + 9) {
  width: 35px;
  background-color: lightgreen;
}

div:nth-last-of-type(3) {
  width: 250px;
  background-color: lightblue;
}

Результат

Обратите внимание, что justify-contents выравнивает столбцы и не влияет на элементы или их выравнивание в областях сетки. Элементы сетки, даже выходящие за границы своей ячейки, не влияют на выравнивание столбцов.

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

В этом примере демонстрируется ключевое слово safe. Мы задаём четыре центрированных flex-элемента, которым запрещено переноситься, поэтому они выходят за границы своего однострочного контейнера flex-линии. Добавляя safe к center в свойстве justify-content, мы добиваемся того, что переполняющее содержимое ведёт себя так, как если бы режим выравнивания был start

<p><code>justify-content: center;</code></p>
<section class="container safe">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code></p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code> with 3 items</p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>

.container {
  margin: 5px auto;
  border: 1px dashed;
  box-sizing: border-box;
  background-color: lightblue;
}

div {
  line-height: 1em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
  background-color: pink;
}

Для контейнера задано center, а для всех контейнеров, кроме первого, добавлено ключевое слово safe:

.container {
  align-items: baseline;
  display: flex;
  width: 350px;
  height: 2em;
}

.safe {
  justify-content: center;
}

.safe-center {
  justify-content: safe center;
}

div {
  flex: 0 0 100px;
}

Результат

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

Визуализация распределения flex-элементов

В этом примере используется многострочный flex-макет с переносом. Второй flex-элемент имеет положительный коэффициент роста и занимает всё доступное свободное пространство в первой flex-строке.

CSS

#container {
  margin: 5px auto;
  border: 1px dashed black;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; /* Can be changed in the live sample */
  width: 510px;
}

div {
  line-height: 2em;
  flex: 0 0 120px;
  background-color: pink;
}

div:nth-of-type(2) {
  flex-grow: 1;
  background-color: yellow;
}

div:nth-of-type(n + 9) {
  flex: 0 0 35px;
  background-color: lightgreen;
}
div:last-of-type {
  flex: 0 0 300px;
  background-color: lightblue;
}

<section id="container">
  <div>A</div>
  <div>GROW</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

Результат

Выберите разные ключевые слова в раскрывающемся меню, чтобы увидеть различные ключевые значения justify-content. Поскольку элемент в первой строке может расти, в этой строке нет свободного пространства для распределения свойством justify-content. При значении space-between первый элемент каждой строки прилегает к краю главного начала, а последний — к краю главного конца. Поэтому, если в строке только один элемент, он будет выровнен по краю главного начала (как видно в последней строке). Для других значений space-*, например space-evenly и space-around, это не так: они располагают одиночные flex-элементы в строке по центру.

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

Совместимость с браузерами

См. также

• Основные понятия flexbox
• Выравнивание элементов во flex-контейнере
• Выравнивание блоков в grid-макете
• Модуль выравнивания блоков CSS