flex-shrink

Ejemplos

Permitir que los elementos flex se encojan

Usa shrink para permitir que un elemento flex se encoja si es necesario:

<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>

Evitar que los elementos se encojan

Usa shrink-0 para evitar que un elemento flex se encoja:

<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>

Usando un valor personalizado

Usa la sintaxis shrink-[<value>] para establecer el flex shrink factor basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis shrink-(<custom-property>) :

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

Esto es solo un atajo para shrink-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad flex-shrink con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.