justify-content

start

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

end

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

flex-start

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

flex-end

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

center

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

left

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

right

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

normal

Ведёт себя как stretch, за исключением случаев контейнеров с несколькими колонками с не-auto column-width, в этом случае колонки занимают указанную column-width ширину, а не растягиваются для заполнения контейнера. Поскольку stretch ведёт себя как start в контейнерах flex, 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.

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

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

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    

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

HTML

Контейнер <section>, будущий контейнер сетки, содержит 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

Мы устанавливаем ширину контейнера в 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 к center в свойстве justify-content означает, что содержимое, выходящее за пределы, ведёт себя так, как если бы режим выравнивания был start

Контейнер установлен на 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 не имеет эффекта, если элементы не выходят за пределы контейнера.

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

CSS

#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;
}

Результат

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

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