16. Выравнивание: align-items vs align-content

CSS: Выравнивание: align-items vs align-content

В этом уроке мы рассмотрим два важных свойства CSS, используемых для выравнивания элементов во flexbox и grid контейнерах: align-items и align-content. Хотя оба свойства касаются выравнивания, они работают по-разному и применяются в разных ситуациях.

align-items: Выравнивание элементов вдоль поперечной оси

Свойство align-items определяет, как flex-элементы или grid-элементы выравниваются внутри своего контейнера вдоль поперечной оси (cross axis). В случае с flex-direction: row; поперечная ось – это вертикальная ось, а в случае flex-direction: column; – горизонтальная. Это свойство применяется к контейнеру.

Допустимые значения:

• stretch (значение по умолчанию): Растягивает элементы, чтобы заполнить контейнер вдоль поперечной оси.
• flex-start: Выравнивает элементы в начале поперечной оси.
• flex-end: Выравнивает элементы в конце поперечной оси.
• center: Выравнивает элементы по центру поперечной оси.
• baseline: Выравнивает элементы по базовой линии текста.

Пример:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  height: 200px; /* Задаем высоту контейнера */
  align-items: center; /* Выравниваем элементы по центру вертикально */
  border: 1px solid black;
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

В этом примере элементы item будут выровнены по центру вертикально внутри контейнера container.

align-content: Выравнивание строк (или столбцов) вдоль поперечной оси

Свойство align-content работает похоже на align-items, но оно применяется, когда у вас есть несколько строк (или столбцов) flex-элементов или grid-элементов внутри контейнера. Оно определяет, как эти строки (или столбцы) распределяются и выравниваются вдоль поперечной оси. Это свойство также применяется к контейнеру. align-content работает только когда поперечная ось имеет свободное пространство (то есть, если элементы не занимают всю высоту или ширину контейнера).

Допустимые значения:

• stretch (значение по умолчанию): Растягивает строки (или столбцы), чтобы заполнить контейнер вдоль поперечной оси.
• flex-start: Выравнивает строки (или столбцы) в начале поперечной оси.
• flex-end: Выравнивает строки (или столбцы) в конце поперечной оси.
• center: Выравнивает строки (или столбцы) по центру поперечной оси.
• space-between: Равномерно распределяет строки (или столбцы) с равным пространством между ними.
• space-around: Равномерно распределяет строки (или столбцы) с равным пространством вокруг каждой строки (или столбца).
• space-evenly: Равномерно распределяет строки (или столбцы) с равным пространством вокруг них, включая пространство в начале и в конце контейнера.

Пример:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */
  height: 200px; /* Задаем высоту контейнера */
  align-content: space-between; /* Распределяем строки с пространством между ними */
  border: 1px solid black;
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

В этом примере элементы будут перенесены на новую строку, если не помещаются в одну строку. Свойство align-content: space-between распределит эти строки таким образом, что первая строка будет прижата к верху контейнера, последняя – к низу, а оставшееся пространство будет равномерно распределено между строками.

Жизненный пример

Многие CSS фреймворки, такие как Bootstrap и Materialize, используют flexbox и grid, а следовательно и свойства align-items и align-content, для создания гибких и адаптивных макетов. Например, Bootstrap использует flexbox для своей системы сеток, позволяя легко выравнивать колонки и контент внутри них. Вы можете увидеть использование align-items для вертикального выравнивания элементов в навигационных панелях или карточках, а align-content - для распределения контента в многострочных макетах.

Ключевые моменты

• align-items выравнивает отдельные элементы вдоль поперечной оси.
• align-content выравнивает строки (или столбцы) элементов вдоль поперечной оси.
• align-content работает только когда есть свободное пространство на поперечной оси и включен перенос (flex-wrap: wrap) или несколько строк в grid.
• Оба свойства применяются к flex или grid контейнеру.
• Понимание разницы между этими свойствами необходимо для создания сложных и адаптивных макетов.

Интерактивный пример