Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Метод использования и примеры свойства CSS3 align-content

Описание

Когда на горизонтали остается избыточное пространство (вертикально), свойство CSS может выровнять элементы в эластичном контейнере. Это свойство не влияет на однорядный эластичный контейнер. Кроме того, вы можете использовать CSS justify-contentСвойство (горизонтальное) выравнивает элементы по главной оси.

В таблице ниже суммированы контекст использования и история версий этого свойства.

Значение по умолчанию:	stretch
Подходит для:	Многострочный эластичный контейнер
Ингерит:	Нет
Анимировано:	Нет.См. также Анимационные свойства.
Версия CSS:	Новая функция CSS3
JavaScript грамматика:	object.style.alignContent="center"

Грамматика использования align-content

Грамматика этого свойства такая:

align-content:　center　|　flex-start　|　flex-end　|　space-between　|　space-around　|　stretch　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство align-content в CSS.

Пример

　.flex-container　{
　　　　　　　　　　　/*　Safari浏览器　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-flex-flow: row wrap;
　　　　　　　　　　　-webkit-align-content: space-around;
　　　　　　　　　　　/* Стандартная грамматика */
　　　　　　　　　　　display: flex;
　　　　　　　　　　　flex-flow: row wrap;
　　　　　　　　　　　align-content: space-around;
　　　　}

Проверьте, ›/‹

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

В таблице ниже описаны значения этого свойства.

Значение	Описание
center	Элементы расположены в центре эластичного контейнера.
flex-start	Элементы расположены в начале эластичного контейнера.
flex-end	Элементы расположены в конце эластичного контейнера.
space-between	Элементы равномерно распределены в эластичном контейнере, чтобы пространство между двумя смежными элементами было одинаковым.
space-around	Элементы равномерно распределены в эластичном контейнере, чтобы пространство вокруг каждого элемента (т.е. до, между и после) было одинаковым.
stretch	Растянуть элемент, чтобы он подходил под эластичный контейнер. В Verfügungное пространство распределяется поровну между всеми элементами. Это значение по умолчанию.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанные элементы используют вычисленное значение свойства align-content родительского элемента.

Совместимость с браузерами

Свойство align-content поддерживается всеми основными браузерами. Число указывает на версию первого браузера, поддерживающего это свойство.

	Firefox 28+ Google Chrome 21+ Internet Explorer 11+ Apple Safari 7+ ^-webkit- Opera 12.1+

Внимание: Apple Safari 7 и более новые версии поддерживают этот параметр align-content, но требует префикса -webkit-, например, -webkit-align-content: center;

Дополнительное чтение

Узнайте подробнее из следующих учебников:CSS Аラインмент.

Соответствующие свойства:align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

Свойство align-items CSS3