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?
flex-grow controla cuánto debe expandirse un elemento en relación con el espacio libre disponible dentro del contenedor flex.
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.
Ver el Pen css_flex_grow_1 de Códica (@hexlet) 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.
Ver el Pen css_flex_grow_1_with_text de Códica (@codica_la) 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.
Ver el Pen css_flex_flex_grow_1_with_text_1 de Códica (@codica_la) en CodePen.
Consideraciones importantes
flex-growno reduce el tamaño de los elementos, solo los agranda con el espacio disponible.- Si
flex-growno está presente (o es0), el tamaño del elemento se mantiene según su contenido. - Con
flex-direction: column,flex-growafecta la altura en vez del ancho. - Si quieres controlar los espacios entre elementos, usa gap en lugar de margin.
Resumen
flex-growdistribuye el espacio libre dentro de un contenedor flex.- Si todos los elementos tienen
flex-grow: 1, compartirán el espacio libre en partes iguales. - Si un elemento tiene
flex-grow: 2, crecerá el doble en comparación con un elemento que tieneflex-grow: 1. - Solo crece un elemento si hay espacio libre en el contenedor.
- No reduce el tamaño base de los elementos.
flex-growafecta la altura si elflex-directionestá encolumn.
Materiales adicionales
¿Dudas sobre la lección? Pregunta en el chat del grupo
Te responderán tu mentor o tus compañeros.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
