Codicia cero de elementos flex en CSS

Si flex-grow es igual a cero para algún elemento, entonces ese elemento no participará en la distribución del espacio libre. Por defecto, la codicia tiene precisamente un valor cero y, por lo tanto, los elementos sin flex-grow establecido no comparten el espacio libre entre ellos.

Pongamos un ejemplo y hagamos un cálculo. Supongamos que tenemos tres elementos flex, cada uno con un ancho de 100px. Supongamos que el primer elemento no tiene flex-grow (o es igual a 0), el segundo elemento tiene un flex-grow igual a 2, y el tercero - igual a 3.

Supongamos que el ancho del padre es 500px. Entonces el espacio libre será igual a 200px, y por una unidad de flex-grow corresponderá 200px / 5 = 40px. Resultará que el ancho del primer elemento se mantendrá en 100px, ya que no participa en la distribución, el ancho del segundo será 100px + 2 * 40px = 180px, y el ancho del tercero - 100px + 3 * 40px = 220px.

Tareas prácticas

En todas las tareas a continuación, se le presentará algún código con elementos flex que tienen ancho y flex-grow. Según el código presentado, calcule qué dimensiones tendrá cada uno de los elementos. Luego ejecute el código y verifique sus 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: 0;
}
.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: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}