flex-shrink

Примеры

Разрешение flex элементам сжиматься

Используйте shrink для разрешения flex элементу сжиматься при необходимости:

<div class="flex ...">  <div class="h-14 w-14 flex-none ...">01</div>  <div class="h-14 w-64 shrink ...">02</div>  <div class="h-14 w-14 flex-none ...">03</div></div>

Предотвращение сжатия элементов

Используйте shrink-0 для предотвращения сжатия flex элемента:

<div class="flex ...">  <div class="h-16 flex-1 ...">01</div>  <div class="h-16 w-32 shrink-0 ...">02</div>  <div class="h-16 flex-1 ...">03</div></div>

Использование пользовательского значения

Используйте синтаксис shrink-[<value>] , чтобы задать flex shrink factor на основе полностью пользовательского значения:

<div class="shrink-[calc(100vw-var(--sidebar))] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: shrink-(<custom-property>)

<div class="shrink-(--my-shrink) ...">  <!-- ... --></div>

Это просто сокращение, shrink-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a flex-shrink утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="shrink md:shrink-0 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.