Растяжимость элементов

Классы grow и grow-none задают flex-grow: может ли флекс-элемент растянуться и занять свободное место вдоль основной оси. Берите grow, когда один элемент строки должен заполнить всё, что осталось от соседей.

Пример

grow и grow-none

Подпись над образцом — где стоит класс.

grow на элементе 2

1 grow 3

grow на всех

grow grow grow

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

grow grow-none grow

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">grow на элементе 2</code>
    <div class="flex gap-1 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="grow p-1 bg-tertiary-container color-on-tertiary-container radius-ui">grow</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">grow на всех</code>
    <div class="flex gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="grow p-1 bg-primary-container color-on-primary-container radius-ui">grow</span>
      <span class="grow p-1 bg-tertiary-container color-on-tertiary-container radius-ui">grow</span>
      <span class="grow p-1 bg-primary-container color-on-primary-container radius-ui">grow</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">grow-none на элементе 2, grow на остальных</code>
    <div class="flex gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="grow p-1 bg-primary-container color-on-primary-container radius-ui">grow</span>
      <span class="grow-none p-1 bg-tertiary-container color-on-tertiary-container radius-ui">grow-none</span>
      <span class="grow p-1 bg-primary-container color-on-primary-container radius-ui">grow</span>
    </div>
  </div>
</div>

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: с ширины md средний элемент растягивается.

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">grow-none md:grow на элементе 2</code>
    <div class="flex gap-1 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="grow-none md:grow p-1 bg-tertiary-container color-on-tertiary-container radius-ui">grow-none md:grow</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`grow`	`flex-grow: 1`	—
`grow-none`	`flex-grow: 0`	—

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

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

Применение

Как выбрать

grow — элемент забирает свободное место. Если grow стоит на нескольких элементах, место делится между ними поровну, а каждый сохраняет ширину своего содержимого.
grow-none — элемент остаётся своего размера. Это значение по умолчанию; класс нужен, чтобы отменить grow, заданный на другой ширине экрана.

Поле и кнопка в одной строке

HTML

<div class="flex gap-1">
  <input class="grow" type="search" aria-label="Поиск">
  <button type="button">Найти</button>
</div>

Чтобы растянуть элементы до равной ширины независимо от содержимого, берите flex-1: он задаёт рост вместе с нулевым базисом.

Ограничения

Класс действует только на прямого потомка флекс-контейнера.
grow не ограничивает ширину сверху: чтобы элемент не растягивался шире нужного, добавьте ему max-w-*.

Навигация

Главное

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

Содержание

Растяжимость элементов

Пример

grow и grow-none

Ширина экрана

Классы

Применение

Как выбрать

Поле и кнопка в одной строке

Ограничения

См. также

Settings