Размещение отдельного элемента (place-self)link

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

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

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

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

(Обратите внимание, что в исходном коде был класс self-text-center, но по описанию это self-center.)

Синтаксисlink

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

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

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

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

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

<div class="grid grid-col-3 self-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

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

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

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