flex-grow

Ejemplos

Permitir que los elementos crezcan

Utiliza grow para permitir que un elemento flex crezca para ocupar cualquier espacio disponible:

<div class="flex ...">  <div class="size-14 flex-none ...">01</div>  <div class="size-14 grow ...">02</div>  <div class="size-14 flex-none ...">03</div></div>

Hacer crecer los elementos según un factor

Utiliza utilidades grow-<number> como grow-3 para hacer que los elementos flex crezcan proporcionalmente según su factor de crecimiento, permitiéndoles ocupar el espacio disponible de forma relativa entre sí:

<div class="flex ...">  <div class="size-14 grow-3 ...">01</div>  <div class="size-14 grow-7 ...">02</div>  <div class="size-14 grow-3 ...">03</div></div>

Evitar que los elementos crezcan

Utiliza grow-0 para evitar que un elemento flex crezca:

<div class="flex ...">  <div class="size-14 grow ...">01</div>  <div class="size-14 grow-0 ...">02</div>  <div class="size-14 grow ...">03</div></div>

Usar un valor personalizado

Usa la sintaxis grow-[<value>] para establecer el/la factor de crecimiento flex basándose en un valor completamente personalizado:

<div class="grow-[25vw] ...">  <!-- ... --></div>

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

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

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

Diseño responsivo

Antepone a la utilidad flex-grow 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="grow md:grow-0 ...">  <!-- ... --></div>

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