CSS-свойство align-content

CSS-свойство align-content выравнивает flex-элементы внутри flex-контейнера, когда на вертикальной оси X есть дополнительное пространство. Для выравнивания элементов по горизонтальной оси Y вы можете использовать CSS-свойство justify-content.

Значение по умолчанию:	`stretch`
Применяется к:	Многолинейные флекс контейнеры
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства align-content:

.flex-container {
    /* Safari */
    display: -webkit-flex; 
    -webkit-flex-flow: row wrap;
    -webkit-align-content: space-around;
    /* Standard syntax */
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}

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

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

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