Teoría: Propiedades de los elementos Flex. Flexibilidad. Flex-grow

Hasta ahora hemos aprendido a trabajar con contenedores flexibles (flexbox).

Hoy vamos a explorar la propiedad flex-grow, que nos permite decidir cuánto debe crecer cada elemento cuando hay espacio disponible.

Usaremos ejemplos prácticos para entenderlo mejor. Siéntete libre de experimentar con los valores en CodePen y observar cómo cambian los resultados.

¿Qué hace la propiedad flex-grow?

A veces se encuentra la explicación de que flex-grow simplemente aumenta el tamaño de un elemento en relación con los demás, pero en realidad lo que hace es distribuir el espacio sobrante entre los elementos que tienen esta propiedad.

💡 flex-grow solo acepta valores numéricos no negativos (como 0, 1, 2, etc.).

¿Cómo funciona flex-grow?

Ejemplo 1: Distribución de espacio libre por igual

Si aplicamos flex-grow: 1 a todos los elementos dentro de un contenedor flex, compartirán el espacio libre en partes iguales.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Ejemplo 2: ¿Qué pasa si un bloque tiene más contenido?

Cuando un elemento tiene más contenido, no reduce su tamaño, sino que se expande para acomodarlo. flex-grow solo afecta el espacio sobrante.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Ejemplo 3: Asignar diferentes valores de flex-grow

Si un elemento tiene flex-grow: 2 y otro flex-grow: 1, el primero crecerá el doble que el segundo con respecto al espacio libre disponible.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Consideraciones importantes

• flex-grow no reduce el tamaño de los elementos, solo los agranda con el espacio disponible.
• Si flex-grow no está presente (o es 0), el tamaño del elemento se mantiene según su contenido.
• Con flex-direction: column, flex-grow afecta la altura en vez del ancho.
• Si quieres controlar los espacios entre elementos, usa gap en lugar de margin.