flex-grow

Ejemplos

Permitir que los elementos crezcan

Usa grow para permitir que un elemento flex crezca para llenar 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>

Elementos que crecen basados en factor

Usa utilidades grow-<number> como grow-3 para hacer que los elementos flex crezcan proporcionalmente según su factor de crecimiento, permitiéndoles llenar el espacio disponible en relación 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

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

Usando un valor personalizado

Usa la sintaxis grow-[<value>] para establecer el flex grow factor basado 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 agrega la función var() por ti automáticamente.

Responsive design

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

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

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