Выравнивание содержимого по поперечной оси

Классы content-cross-* задают align-content: где стоят строки флекс-контейнера с переносом или строки сетки, когда контейнер выше их, и как между ними делится свободное место. Берите их для блоков заданной высоты с переносящимися элементами.

Пример

Значения

Флекс-контейнер с flex-wrap заданной высоты: пять элементов в две строки. Подпись над образцом — класс контейнера.

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">content-cross-start</code>
    <div class="flex flex-wrap content-cross-start h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">content-cross-center</code>
    <div class="flex flex-wrap content-cross-center h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">content-cross-end</code>
    <div class="flex flex-wrap content-cross-end h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">content-cross-between</code>
    <div class="flex flex-wrap content-cross-between h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">content-cross-around</code>
    <div class="flex flex-wrap content-cross-around h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">content-cross-evenly</code>
    <div class="flex flex-wrap content-cross-evenly h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">content-cross-stretch</code>
    <div class="flex flex-wrap content-cross-stretch h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="basis-1/3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="basis-1/3 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
    </div>
  </div>
</div>

Классы

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

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

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

Применение

Как выбрать

content-cross-start, content-cross-center, content-cross-end — строки вместе у начала, в центре или у конца.
content-cross-between, content-cross-around, content-cross-evenly — свободное место между строками, как у justify-between, justify-around, justify-evenly.
content-cross-stretch — строки растягиваются и делят высоту; это значение по умолчанию у флекс-контейнера.

Метки в блоке заданной высоты

HTML

<div class="flex flex-wrap content-cross-start gap-1 h-f0">
  <span>Метка</span>
  <span>Метка</span>
  <span>Метка</span>
</div>

Ограничения

Во флекс-контейнере класс действует только вместе с flex-wrap или flex-wrap-reverse.
Нужна свободная высота: у контейнера без заданной высоты строки занимают её целиком, и выравнивать нечего.
Классы content-cross-* двигают строки целиком. Элементы внутри строки выравнивают классы items-cross-*.

Навигация

Главное

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

Содержание