Гибкость элементов

Классы flex-* задают сокращённое свойство flex: рост, сжатие и базовый размер флекс-элемента сразу. Берите их вместо отдельных grow, shrink и basis-*, когда нужна одна из типовых комбинаций.

Пример

Рост

Три элемента с разной длиной текста, класс стоит на каждом. С flex-1 элементы равной ширины, с flex-auto длинный остаётся шире, с flex-initial элементы не растут и место остаётся свободным.

flex-1

Короткий Элемент с длинным текстом Средний текст

flex-auto

Короткий Элемент с длинным текстом Средний текст

flex-initial

Короткий Элемент с длинным текстом Средний текст

HTML

<div class="flex flex-col gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">flex-1</code>
    <div class="flex gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui">Короткий</span>
      <span class="flex-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Элемент с длинным текстом</span>
      <span class="flex-1 p-1 bg-secondary-container color-on-secondary-container radius-ui">Средний текст</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">flex-auto</code>
    <div class="flex gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="flex-auto p-1 bg-primary-container color-on-primary-container radius-ui">Короткий</span>
      <span class="flex-auto p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Элемент с длинным текстом</span>
      <span class="flex-auto p-1 bg-secondary-container color-on-secondary-container radius-ui">Средний текст</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">flex-initial</code>
    <div class="flex gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="flex-initial p-1 bg-primary-container color-on-primary-container radius-ui">Короткий</span>
      <span class="flex-initial p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Элемент с длинным текстом</span>
      <span class="flex-initial p-1 bg-secondary-container color-on-secondary-container radius-ui">Средний текст</span>
    </div>
  </div>
</div>

Сжатие

Контейнер уже, чем элементы вместе. Элемент с flex-none или flex-content сохраняет ширину своего текста, элемент с flex-initial сжимается и переносит строку.

flex-none на элементе 2, flex-1 на остальных

Короткий Элемент с длинным текстом Средний текст

flex-content на элементе 2, flex-1 на остальных

Короткий Элемент с длинным текстом Средний текст

flex-initial на элементе 2, flex-1 на остальных

Короткий Элемент с длинным текстом Средний текст

HTML

<div class="flex flex-col gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">flex-none на элементе 2, flex-1 на остальных</code>
    <div class="flex gap-1 w-g0 max-w-full overflow-auto p-1 border border-dashed border-outline radius-ui">
      <span class="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui">Короткий</span>
      <span class="flex-none p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Элемент с длинным текстом</span>
      <span class="flex-1 p-1 bg-secondary-container color-on-secondary-container radius-ui">Средний текст</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">flex-content на элементе 2, flex-1 на остальных</code>
    <div class="flex gap-1 w-g0 max-w-full overflow-auto p-1 border border-dashed border-outline radius-ui">
      <span class="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui">Короткий</span>
      <span class="flex-content p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Элемент с длинным текстом</span>
      <span class="flex-1 p-1 bg-secondary-container color-on-secondary-container radius-ui">Средний текст</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">flex-initial на элементе 2, flex-1 на остальных</code>
    <div class="flex gap-1 w-g0 max-w-full overflow-auto p-1 border border-dashed border-outline radius-ui">
      <span class="flex-1 p-1 bg-primary-container color-on-primary-container radius-ui">Короткий</span>
      <span class="flex-initial p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Элемент с длинным текстом</span>
      <span class="flex-1 p-1 bg-secondary-container color-on-secondary-container radius-ui">Средний текст</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`flex-1`	`flex: 1 1 0%`	—
`flex-auto`	`flex: 1 1 auto`	—
`flex-content`	`flex: 1 0 auto`	—
`flex-initial`	`flex: 0 1 auto`	—
`flex-none`	`flex: none`	—

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

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

Применение

Как выбрать

Класс	Растёт	Сжимается	Начинает с
`flex-1`	да	да	нуля — элементы делят место поровну
`flex-auto`	да	да	своего размера
`flex-content`	да	нет	своего размера
`flex-initial`	нет	да	своего размера
`flex-none`	нет	нет	своего размера

flex-initial повторяет значение по умолчанию у флекс-элемента; класс нужен, чтобы вернуть его на другой ширине экрана.

Колонки равной ширины

HTML

<div class="flex gap-2">
  <div class="flex-1">Колонка</div>
  <div class="flex-1">Колонка с длинным текстом</div>
  <div class="flex-1">Колонка</div>
</div>

Боковая панель и основная область

HTML

<div class="flex gap-2">
  <aside class="flex-none w-g0">Панель фиксированной ширины</aside>
  <main class="flex-1 min-w-0">Основная область</main>
</div>

Ограничения

Классы действуют только на прямого потомка флекс-контейнера.
flex-1 не делает элемент уже его самого длинного слова или картинки; для этого добавьте min-w-0.
flex на этой странице — значение свойства у элемента. Класс flex, который делает элемент флекс-контейнером, описан на странице Метод отображения элемента.

См. также