Свойство justify-content задает выравнивание элементов вдоль главной оси.

Применяется к: родительскому элементу для flex блоков.

См. все flexbox свойства: flex-direction, justify-content, align-items, flex-wrap, flex-flow, align-self, order, flex-basis, flex-grow, flex-shrink, flex.

Значения

Значение Описание
flex-start Блоки прижаты к началу главной оси.
flex-end Блоки прижаты к концу главной оси.
center Блоки стоят по центру главной оси.
space-between Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу.
space-around Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками. Однако, они не равны, как могло бы показаться: промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси.

Значение по умолчанию: flex-start.

Примеры

Пример . Значение flex-start

Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:

Результат выполнения кода:

Пример . Значение flex-end

В данном примере ось также направлена слева направо, но блоки прижаты к правой стороне, так как задано justify-content: flex-end:

Результат выполнения кода:

Пример . Значение center

Сейчас блоки будут стоять по центру независимо от направления главной оси:

Результат выполнения кода:

Пример . Значение space-between

Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу:

Результат выполнения кода:

Пример . Значение space-around

Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками. Однако, они не равны, как могло бы показаться: промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси:


Результат выполнения кода:

Пример . Значение center. Ось направлена вниз

Сменим направление главной оси, задав flex-direction: column:

Результат выполнения кода:

Пример . Значение space-between. Ось направлена вниз

Сейчас блоки распределятся равномерно по вертикали:

Результат выполнения кода: