Облегчить душу

align-content

Задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

Песочница

1
2
3
4
div {
  display: flex;
  align-content: flex-start;
}

Краткая информация

Значение по умолчаниюstretch
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Значения

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !