Размещение отдельного элемента

Классы self-* задают place-self — align-self и justify-self одним значением: где один элемент стоит в своей ячейке сетки, независимо от items-* контейнера. Берите их, чтобы поставить один элемент в угол или в центр ячейки.

Пример

Значения

Сетка из одной ячейки заданной высоты. Подпись над образцом — класс элемента.

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-auto</code>
    <div class="grid h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="self-auto p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-auto</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-start</code>
    <div class="grid h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="self-start p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-start</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-center</code>
    <div class="grid h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="self-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-center</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-end</code>
    <div class="grid h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="self-end p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-end</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-stretch</code>
    <div class="grid h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="self-stretch p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-stretch</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`self-auto`	`align-self: auto; justify-self: auto; place-self: auto`	—
`self-start`	`align-self: start; justify-self: start; place-self: start`	—
`self-end`	`align-self: end; justify-self: end; place-self: end`	—
`self-center`	`align-self: center; justify-self: center; place-self: center`	—
`self-stretch`	`align-self: stretch; justify-self: stretch; place-self: stretch`	—

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:self-auto.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Как выбрать

self-auto — элемент следует классу контейнера; значение по умолчанию. Класс нужен, чтобы отменить self-* на другой ширине экрана.
self-start, self-center, self-end — элемент своего размера у начала, в центре или у конца ячейки по обеим осям.
self-stretch — элемент на всю ячейку.

Метка в углу карточки

HTML

<div class="grid">
  <img class="row-start-1 col-start-1" src="photo.jpg" alt="Фото">
  <span class="row-start-1 col-start-1 self-start">Новинка</span>
</div>

Ограничения

Во флекс-контейнере действует только часть align-self: класс выравнивает элемент по поперечной оси, как self-cross-*.
Класс ставят на элемент, а не на контейнер.

Навигация

Главное

Документация

Содержание