Вы здесь

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

Свойство justify-content выравнивает флекс-элементы по ширине флекс-контейнера, распределяя оставшееся свободное пространство, незанятое флекс-элементами. Для выравнивания элементов по вертикали используется свойство align-content.

CSS синтаксис

justify-content: center | flex-start | flex-end | space-between | space-around | initial | inherit;

Возможные значения

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

Пример

Установим свободное пространство между флекс-элементами внутри флекс-контейнера


div {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
     display: flex;
     justify-content: space-around;
}