Propiedad flex-grow

La propiedad flex-grow determina cuánto puede ser un bloque flex individual más grande que los elementos adyacentes, si es necesario.

Por ejemplo, si todos los bloques flex dentro de un contenedor flex tienen flex-grow:1, entonces tendrán el mismo tamaño. Si uno de ellos tiene flex-grow:2, será 2 veces más grande que todos los demás.

Si el ancho total de los elementos es menor que el ancho del padre, por lo tanto 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, establecida en los elementos flex. El valor de esta propiedad es un número adimensional.

Se aplica a: un bloque flex específico.

Esta propiedad forma parte como componente de la propiedad abreviada flex.

Sintaxis

selector {
	flex-grow: número positivo;
}

Valor por defecto: 0.

Ejemplo

Ahora tenemos dos bloques flex con un ancho de 100px. Su ancho total 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. Pero si se les asigna, entonces el ancho real de los elementos será mayor que el establecido - ellos proporcionalmente dividirán el espacio libre entre sí y lo agregarán a su ancho.

Por ejemplo, digamos que el primer elemento tiene un flex-grow igual a 1, y el segundo - 3. Calculemos qué parte del espacio libre recibirá cada elemento.

Primero necesitamos obtener la cantidad total de unidades de flex-grow de todos nuestros elementos. El primer elemento tiene 1, y 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 corresponde 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

Digamos que ahora el ancho del padre es de 400px, el ancho del primer elemento es de 200px, y el ancho del segundo elemento - 100px. Resulta, 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 corresponde a una unidad de codicia.

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 convertirá en 250px, y el segundo se convertirá en 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

Digamos que nuevamente el ancho del padre es de 400px, el ancho del primer elemento es de 200px, y el ancho del segundo elemento - 100px.

Ahora establezcamos para el primer elemento flex-grow con un valor de 3, y para el segundo - con un valor de 1. Resultará que la codicia total es igual a 4. Entonces una unidad de codicia es igual a 100px / 4 = 25px.

Al primer elemento se agregarán 75px, y se convertirá en 275px, y al segundo - 25px, se convertirá en 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;
}

Véase también

propiedad flex-direction,
que establece la dirección de los ejes de los bloques flex
propiedad justify-content,
que establece la alineación a lo largo del eje principal
propiedad align-items,
que establece la alineación a lo largo del eje transversal
propiedad flex-wrap,
que establece la multibanda de los bloques flex
propiedad flex-flow,
abreviatura para flex-direction y flex-wrap
propiedad order,
que establece el orden de los bloques flex
propiedad align-self,
que establece la alineación de un bloque
propiedad flex-basis,
que establece el tamaño de un bloque flex específico
propiedad flex-shrink,
que establece la compresibilidad de los bloques flex
propiedad flex,
abreviatura para flex-grow, flex-shrink y flex-basis