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

Свойство align-content устанавливает тип выравнивания строк флекс-элементов по вертикали внутри флекс-контейнера, позволяя управлять свободным пространством.

Свойство align-content работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse; и высота flex-контейнера.

CSS синтаксис

Возможные значения

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

Пример использования

Упаковываем строки в середину флекс-контейнера


div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}