Выравнивание отдельного элемента по поперечной оси

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

Пример

Значения

Контейнер с items-cross-stretch: крайние элементы растянуты на всю высоту, а средний выровнен своим классом.

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-cross-auto</code>
    <div class="flex items-cross-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="self-cross-auto p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-cross-auto</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-cross-start</code>
    <div class="flex items-cross-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="self-cross-start p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-cross-start</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-cross-center</code>
    <div class="flex items-cross-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="self-cross-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-cross-center</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-cross-end</code>
    <div class="flex items-cross-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="self-cross-end p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-cross-end</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-cross-stretch</code>
    <div class="flex items-cross-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="self-cross-stretch p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-cross-stretch</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">self-cross-baseline</code>
    <div class="flex items-cross-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="self-cross-baseline p-1 bg-tertiary-container color-on-tertiary-container radius-ui">self-cross-baseline</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`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`	—
`self-cross-baseline`	`align-self: baseline`	—

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

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

Применение

Как выбрать

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

Кнопка, которая не растягивается

HTML

<div class="flex gap-2">
  <p>Длинный текст описания в несколько строк.</p>
  <button class="self-cross-start" type="button">Подробнее</button>
</div>

Ограничения

Класс действует на прямого потомка флекс-контейнера или сетки.
При flex-col поперечная ось горизонтальна: класс выравнивает по ширине.

Навигация

Главное

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

Содержание