Справочник по CSS Align Content: Примеры и Объяснения

CSS свойство `align-content` управляет выравниванием и распределением пространства между флекс-элементами по перпендикулярному направлению основной оси. Оно применяется к контейнеру, который использует `flex-wrap: wrap` или `flex-wrap: wrap-reverse` для разделения флекс-элементов на несколько строк или столбцов.

Значения свойства `align-content`:

1. `flex-start` (по умолчанию) - флекс-элементы выравниваются в начале контейнера.

css
.flex-container {
  align-content: flex-start;
}

2. `flex-end` - флекс-элементы выравниваются в конце контейнера.

css
.flex-container {
  align-content: flex-end;
}

3. `center` - флекс-элементы выравниваются по центру контейнера.

css
.flex-container {
  align-content: center;
}

4. `space-between` - пространство равномерно распределяется между флекс-элементами, начальные и конечные элементы прижимаются к краям контейнера.

css
.flex-container {
  align-content: space-between;
}

5. `space-around` - пространство равномерно распределяется между флекс-элементами и по краям контейнера.

css
.flex-container {
  align-content: space-around;
}

6. `space-evenly` - пространство равномерно распределяется между флекс-элементами и по краям контейнера, включая начальные и конечные элементы.

css
.flex-container {
  align-content: space-evenly;
}

Пример использования свойства `align-content`:

html

  
1
  
2
  
3
  
4
  
5

css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 5px;
}

В данном примере флекс-элементы будут равномерно распределены по контейнеру с равным пространством между ними и по краям контейнера.