flex-shrink

Ejemplos

Permitir que los elementos flex se encojan

Utiliza 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

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

Usar un valor personalizado

Usa la sintaxis shrink-[<value>] para establecer el/la factor de encogimiento flex basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad flex-shrink el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.