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