Выравнивание отдельного элемента по поперечной оси (align-self)link

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

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

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

Класс	Значение
.self-cross-auto	align-self: auto;
.self-cross-start	align-self: start;
.self-cross-end	align-self: end;
.self-cross-center	align-self: center;
.self-cross-stretch	align-self: stretch;

Синтаксисlink

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

• Контрольная точка (необязательный параметр):
  Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
  Если не указана, модификатор применяется для всех размеров.

• Модификатор (обязательный параметр):

  • self-cross-auto – элемент выравнивается согласно настройкам родительской области (например, align-items);
  • self-cross-start – элемент прижимается к началу ячейки по поперечной оси;
  • self-cross-end – элемент прижимается к концу ячейки по поперечной оси;
  • self-cross-center – элемент выравнивается по центру ячейки по поперечной оси;
  • self-cross-stretch – элемент растягивается, занимая всё доступное пространство по поперечной оси.

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

<div class="grid grid-col-3">
  <div>Элемент 1</div>
  <div class="self-cross-center">Элемент 2</div>
  <div>Элемент 3</div>
</div>

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

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

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

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