Выравнивание содержимого по поперечной оси (align-content)link

https://dev.ru.simai.io/ru/ui/utility/grid-flex/align-content.php

Данные модификаторы определяют, как содержимое сетки или флексбокса будет выравниваться относительно поперечной оси.

Таблица классовlink

Класс	Значение
.content-cross-start	align-content: flex-start;
.content-cross-end	align-content: flex-end;
.content-cross-center	align-content: center;
.content-cross-between	align-content: space-between;
.content-cross-around	align-content: space-around;
.content-cross-evenly	align-content: space-evenly;

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

Контрольная точка (необязательный параметр):
Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
Если не указана, модификатор применяется для всех размеров.
Модификатор (обязательный параметр):
- content-cross-start – содержимое прижимается к началу по поперечной оси;
- content-cross-end – содержимое прижимается к концу по поперечной оси;
- content-cross-center – содержимое выравнивается по центру по поперечной оси;
- content-cross-between – содержимое распределяется с равными интервалами, первый элемент прижат к началу, последний – к концу;
- content-cross-around – содержимое распределяется с равными интервалами, причём промежутки между крайними элементами и границами контейнера вдвое меньше промежутков между элементами;
- content-cross-evenly – содержимое распределяется равномерно, интервалы одинаковы между всеми элементами и границами контейнера.

Пример использованияlink

<div class="flex content-cross-center">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Здесь элементы будут выравнены по центру относительно поперечной оси.

Адаптивностьlink

Для изменения выравнивания содержимого, начиная с определённого размера экрана, добавьте контрольную точку. Например:

<div class="md:content-cross-start">
  <!-- Начиная с md элементы будут прижаты к началу по поперечной оси -->
</div>