Атрибут alignContent стиля

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

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

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

Комментарий:Необходимо несколько строк элементов, чтобы этот параметр был эффективен.

Пример

Разместите элементы эластичного <div> между двумя строками с пробелом:

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

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

Грамматика

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

object.style.alignContent

Установить свойство alignContent:

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

Значение свойств

Значение Описание
stretch Значение по умолчанию. Строки растягиваются, чтобы занять оставшееся пространство.
center Элементы расположены в центре контейнера.
flex-start Элементы расположены в начале контейнера.
flex-end Элементы расположены в конце контейнера.
space-between Элементы расположены между строками с пробелом.
space-around Пробел перед, между и после строк проекта.
initial Set this property to its default value. См. initial.
inherit Инherit this property from its parent element. См. inherit.

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

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

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

alignContent Это функция CSS3 (1999).

Поддерживается всеми браузерами полностью:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается 11

Связанные страницы

Руководство по CSS:Свойство align-content

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

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

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