Одновременное выравнивание по двум осям

Классы вида {основная}-{поперечная} — от start-start до end-end — задают сразу justify-content и align-items флекс-контейнера. Первая часть имени — положение вдоль основной оси, вторая — поперёк неё. Берите их вместо пары justify-* и items-cross-*, когда элементы нужно просто прижать к углу, краю или центру.

Пример

Девять положений

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

HTML

<div class="grid grid-col-1 sm:grid-col-3 gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">start-start</code>
    <div class="flex start-start 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">start-center</code>
    <div class="flex start-center 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">start-end</code>
    <div class="flex start-end 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">center-start</code>
    <div class="flex center-start 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">center-center</code>
    <div class="flex center-center 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">center-end</code>
    <div class="flex center-end 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">end-start</code>
    <div class="flex end-start 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">end-center</code>
    <div class="flex end-center 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">end-end</code>
    <div class="flex end-end 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="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`start-start`	`justify-content: flex-start; align-items: flex-start`	—
`start-center`	`justify-content: flex-start; align-items: center`	—
`start-end`	`justify-content: flex-start; align-items: flex-end`	—
`center-start`	`justify-content: center; align-items: flex-start`	—
`center-center`	`justify-content: center; align-items: center`	—
`center-end`	`justify-content: center; align-items: flex-end`	—
`end-start`	`justify-content: flex-end; align-items: flex-start`	—
`end-center`	`justify-content: flex-end; align-items: center`	—
`end-end`	`justify-content: flex-end; align-items: flex-end`	—

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

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

Применение

Как выбрать

Класс	Основная ось (`justify-content`)	Поперечная ось (`align-items`)
`start-start`, `start-center`, `start-end`	у начала	у начала, в центре, у конца
`center-start`, `center-center`, `center-end`	в центре	у начала, в центре, у конца
`end-start`, `end-center`, `end-end`	у конца	у начала, в центре, у конца

Содержимое в центре

HTML

<div class="flex center-center h-f0">
  <p>По центру блока</p>
</div>

Распределение места между элементами (between, around, evenly) задают классы justify-*.

Ограничения

Оси следуют направлению: при flex-col первая часть имени выравнивает по вертикали, вторая — по горизонтали.
Начало строки следует направлению письма: при dir="rtl" start-start прижимает элементы к правому верхнему углу.
Классы рассчитаны на флекс-контейнер. В сетке та же пара свойств располагает колонки и элементы в ячейках, и результат другой; для сетки берите items-* и content-*.

Навигация

Главное

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

Содержание