Сжимаемость

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

Пример

shrink и shrink-none

Три элемента шириной w-f0 вместе шире контейнера. С shrink они сжимаются поровну; элемент с shrink-none сохраняет ширину, и сжимаются только соседи.

shrink (у всех трёх)

1 2 3

shrink-none на элементе 2

1 shrink-none 3

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">shrink (у всех трёх)</code>
    <div class="flex gap-1 w-g0 max-w-full p-1 border border-dashed border-outline radius-ui">
      <span class="w-f0 shrink p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-f0 shrink p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="w-f0 shrink 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">shrink-none на элементе 2</code>
    <div class="flex gap-1 w-g0 max-w-full p-1 border border-dashed border-outline radius-ui">
      <span class="w-f0 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="w-f0 shrink-none p-1 bg-tertiary-container color-on-tertiary-container radius-ui">shrink-none</span>
      <span class="w-f0 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
</div>

Классы

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

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

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

Применение

Как выбрать

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

Иконка рядом с длинным текстом

HTML

<div class="flex gap-1 items-cross-center">
  <img class="shrink-none w-d0 h-d0" src="avatar.png" alt="">
  <span class="min-w-0">Длинное имя пользователя, которое переносится</span>
</div>

Ограничения

Флекс-элемент по умолчанию не сжимается уже своего самого длинного слова или картинки. Чтобы он мог стать уже содержимого, добавьте min-w-0 (а в flex-col — min-h-0).
Класс действует только на прямого потомка флекс-контейнера.

Навигация

Главное

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

Содержание