Вы здесь

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

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

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

CSS синтаксис

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

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

Значение Описание
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;
}