align-content

Это свойство не оказывает влияния на контейнеры гибкой компоновки с одной строкой (т. е. те, у которых flex-wrap: nowrap).

normal

Элементы упакованы в их стандартном положении, как будто значение align-content не было задано.

start

Элементы плотно прилегают друг к другу у стартового края контейнера выравнивания по поперечной оси.

center

Элементы плотно прилегают друг к другу по центру контейнера выравнивания вдоль поперечной оси.

end

Элементы плотно прилегают друг к другу у конечного края контейнера выравнивания по поперечной оси.

flex-start

Элементы плотно прилегают друг к другу у края контейнера выравнивания, в зависимости от стороны кросс-старта контейнера гибкой компоновки. Это относится только к элементам макета гибкой компоновки. Для элементов, которые не являются потомками контейнера гибкой компоновки, это значение обрабатывается как start.

flex-end

Элементы плотно прилегают друг к другу у края контейнера выравнивания, в зависимости от стороны кросс-финала контейнера гибкой компоновки. Это относится только к элементам макета гибкой компоновки. Для элементов, которые не являются потомками контейнера гибкой компоновки, это значение обрабатывается как end.

baseline, first baseline, last baseline

Указывает на участие в выравнивании первой или последней базовой линии: выравнивает базовую линию элемента первого или последнего набора базовых линий с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех элементов в группе с общими базовыми линиями.

Значение по умолчанию для first baseline равно start, а для last baseline — end.

space-between

Элементы равномерно распределяются внутри контейнера выравнивания по поперечной оси. Пробелы между каждой парой смежных элементов одинаковые. Первый элемент прилегает к началу контейнера выравнивания по поперечной оси, а последний элемент — к концу контейнера выравнивания по поперечной оси.

space-around

Элементы равномерно распределяются внутри контейнера выравнивания по поперечной оси. Пробелы между каждой парой смежных элементов одинаковые. Пробелы перед первым и после последнего элемента составляют половину пробелов между каждой парой смежных элементов.

space-evenly

Элементы равномерно распределяются внутри контейнера выравнивания по поперечной оси. Пробелы между каждой парой смежных элементов, между начальным краем и первым элементом, и между конечным краем и последним элементом — все одинаковые.

stretch

Если общий размер элементов по поперечной оси меньше размера контейнера выравнивания, элементы размера auto, увеличивают свой размер равномерно (а не пропорционально), но при этом учитывая ограничения, наложенные max-height/max-width (или эквивалентные функции), так что общий размер точно заполняет контейнер выравнивания по поперечной оси.

safe

Используется совместно с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент выходит за пределы контейнера выравнивания, что приводит к потере данных, элемент выравнивается так, как если бы режим выравнивания был start.

unsafe

Используется совместно с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, вызывающее потерю данных, заданное значение выравнивания поддерживается.

align-content = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end    

В этом примере вы можете переключаться между тремя различными значениями свойства display, включая flex, grid, и block. Вы также можете переключаться между различными значениями align-content.

HTML

<section>
  <div class="olive">Olive</div>
  <div class="coral">Coral</div>
  <div class="deepskyblue">Deep<br />sky<br />blue</div>
  <div class="orchid">Orchid</div>
  <div class="slateblue">Slateblue</div>
  <div class="maroon">Maroon</div>
</section>

CSS

section {
  border: solid 1.5px tomato;
  height: 300px;
  width: 300px;
  flex-wrap: wrap; /* used by flex only */
  gap: 0.2rem; /* not used by block */
}
.olive {
  background-color: olive;
}
.coral {
  background-color: coral;
}
.deepskyblue {
  background-color: deepskyblue;
}
.orchid {
  background-color: orchid;
}
.slateblue {
  background-color: slateblue;
  color: white;
}
.maroon {
  background-color: maroon;
  color: white;
}

Результат

Попробуйте изменить значение display и значение align-content.

В блочном макете дочерние элементы обрабатываются как один элемент, что означает, что space-between, space-around, и space-evenly ведут себя по-разному.

• Основные понятия Flexbox
• Выравнивание элементов в контейнере Flex
• Выравнивание блоков в сетке CSS Grid
• Выравнивание блоков CSS
• Блочный и инлайновый макет в обычном потоке
• Block-level_content
• display