Размещение содержимого по обеим осям

Классы content-* задают place-content — align-content и justify-content одним значением. В сетке они располагают колонки и строки, во флекс-контейнере с переносом — элементы в строке и сами строки. Берите content-center, чтобы поставить содержимое в центр блока заданной высоты.

Пример

Значения

Флекс-контейнер с 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-start</code>
    <div class="flex flex-wrap content-start gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center 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">content-center</code>
    <div class="flex flex-wrap content-center gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center 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">content-end</code>
    <div class="flex flex-wrap content-end gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center 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">content-between</code>
    <div class="flex flex-wrap content-between gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center 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">content-around</code>
    <div class="flex flex-wrap content-around gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center 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">content-evenly</code>
    <div class="flex flex-wrap content-evenly gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center 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">content-stretch</code>
    <div class="flex flex-wrap content-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`content-center`	`align-content: center; justify-content: center; place-content: center`	—
`content-start`	`align-content: start; justify-content: start; place-content: start`	—
`content-end`	`align-content: end; justify-content: end; place-content: end`	—
`content-between`	`align-content: space-between; justify-content: space-between; place-content: space-between`	—
`content-around`	`align-content: space-around; justify-content: space-around; place-content: space-around`	—
`content-evenly`	`align-content: space-evenly; justify-content: space-evenly; place-content: space-evenly`	—
`content-stretch`	`align-content: stretch; justify-content: stretch; place-content: stretch`	—

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

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

Применение

Как выбрать

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

Содержимое в центре блока

HTML

<div class="grid content-center h-f0">
  <p>По центру по обеим осям</p>
</div>

По одной оси выравнивают классы justify-* и content-cross-*.

Ограничения

Во флекс-контейнере без flex-wrap вертикальная часть класса не действует.
Нужна свободная высота: у блока без заданной высоты по вертикали двигать нечего.
Не путайте content-* с content: последний задаёт display: contents и описан на странице Метод отображения элемента.

Навигация

Главное

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

Содержание