Свойство justifyContent стиля

Определение и использование

Когда элементы не занимают все доступное пространство по главному оси (горизонтально), justifyContent Атрибут выравнивает элементы эластичного контейнера.

Совет:Используйте alignContent Атрибут выравнивает элементы по горизонтали (вертикально).

См. также:

Руководство по CSS:Свойство justifyContent

Пример

Оставить пространство между элементами эластичного <div>:

document.getElementById("main").style.justifyContent = "space-between";

Попробуйте сами

Грамматика

Возврат свойства justifyContent:

object.style.justifyContent

Установка свойства justifyContent:

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

Значение атрибута

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

Технические детали

Значение по умолчанию: flex-start
Возвратное значение: Строка, представляющая Свойство justifyContent.
Версия CSS: CSS3

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка 12.0 Поддержка 9.0 Поддержка

См. также

Руководство по стилям DOM HTML:Свойство alignContent

Руководство по стилям DOM HTML:Свойство alignItems

Руководство по стилям DOM HTML:Атрибут alignSelf