justify-content

Оновлено: 31.05.2022

justify-content

Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Краткая информация

Значение по умолчанию flex-start
Наследуется Нет
Применяется К флекс-контейнерам
Анимируется Нет

Синтаксис

justify-content: flex-start | flex-end | center | space-between |
space-around | space-evenly

Значения

flex-start Флексы прижаты к началу строки.
flex-end Флексы прижаты к концу строки.
center Флексы выравниваются по центру строки.
space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.
space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

Пример

Объектная модель

Объект.style.justifyContent

Примечание

Safari до версии 9 поддерживает свойство -webkit-justify-content.

Браузеры

justify-content

Переглянути сумісність з Can I use?

justify-content