La propiedad flex-grow de los elementos flex en CSS
Supongamos que ahora tenemos dos bloques flex,
alineados en una fila. A estos bloques se les asigna un ancho
de 100px, y a su padre - 300px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Como puedes ver, el ancho total de nuestros elementos es menor que el ancho del padre, por lo que queda espacio vacío a la derecha.
Si se desea, este espacio vacío se puede
dividir proporcionalmente entre nuestros elementos.
Esto se hace usando la propiedad flex-grow,
asignada a los elementos flex. El valor de esta
propiedad es un número adimensional.
Veamos en la práctica cómo funciona esta propiedad.
Ejemplo
Ahora tenemos dos bloques flex con un ancho de
100px. Su ancho total de los elementos
es de 200px, y el ancho del padre es de 300px.
Resulta que queda un espacio libre
de 100px.
Si a los elementos no se les asigna flex-grow,
simplemente veremos este espacio libre.
Si se les asigna, entonces el ancho real de los elementos
será mayor que el asignado: ellos proporcionalmente
dividirán el espacio libre entre sí
y lo agregarán a su ancho.
Por ejemplo, digamos que para el primer elemento flex-grow
es igual a 1, y para el segundo - 3. Calculemos
qué parte del espacio libre
obtendrá cada elemento.
Primero, necesitamos obtener la cantidad total
de unidades de flex-grow de todos nuestros elementos.
Para el primer elemento es igual a 1, y
para el segundo - 3. Esto significa que en total
es igual a 4.
Ahora dividamos los 100px de espacio libre
entre 4 y obtendremos que 25px corresponden
a una unidad de flex-grow. Resultará
que al primer elemento se le agregará una unidad
de flex-grow, es decir, 25px, y
al segundo - tres unidades, es
decir, 75px.
El ancho del primer elemento será de 125px,
y el del segundo - 175px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
:
Ejemplo
Supongamos ahora que el ancho del padre es igual a 400px,
el ancho del primer elemento es 200px, y el ancho
del segundo elemento es 100px. Resultará
que el espacio libre nuevamente
es igual a 100px.
Asignemos a cada elemento un flex-grow,
igual a 1. En total será 2,
es decir, los 100px de espacio libre
necesitan dividirse entre 2. Resultará que
50px corresponden a una
unidad de flex-grow.
Como todos los elementos tienen el mismo valor
de flex-grow, entonces a todos los elementos se agregará
el mismo valor de 50px. Esto significa
que el primer elemento se volverá de 250px, y
el segundo se volverá de 150px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
Ejemplo
Supongamos nuevamente que el ancho del padre es igual a 400px,
el ancho del primer elemento es 200px, y el ancho
del segundo elemento es 100px.
Ahora establezcamos para el primer elemento
flex-grow en el valor 3, y para el segundo
- en el valor 1. Resultará que el flex-grow
total es igual a 4. Entonces una unidad
de flex-grow es igual a 100px / 4 = 25px
Al primer elemento se agregarán 75px,
y se volverá de 275px, y al segundo -
25px, se volverá de 125px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
Tareas prácticas
En todas las tareas a continuación, se te presentará
algún código con elementos flex que tienen
ancho y flex-grow. Según el código presentado,
calcula qué dimensiones tendrá
cada uno de los elementos. Luego ejecuta el código
y verifica tus cálculos, midiendo los anchos reales
de los elementos.
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
