justify-content
Обновлено: 29.03.2023
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.