Factor de compresión de bloques flex en CSS

En la lección anterior, descubrimos que, cuando a los elementos flex les falta espacio, comienzan a comprimirse. La cantidad en que el ancho total es mayor que el ancho del padre se llama espacio libre negativo.

Técnicamente, la compresión significa que a cada elemento se le quita un trozo de su ancho para que todos los elementos quepan en su contenedor padre.

Hagamos un cálculo. Supongamos, por ejemplo, que tenemos 4 elementos de ancho 200px. Supongamos que el ancho del padre es 700px. Resulta que el ancho total de los elementos es:

200px * 4 = 800px

Este ancho es 100px mayor que el ancho del padre. Calculemos cuánto hay que quitarle a cada elemento para que quepan en su padre:

100px / 4 = 25px

Es decir, el ancho de los elementos será:

200px - 25px = 175px

Implemente los bloques descritos y compruebe mediante medición que el ancho de los elementos es realmente igual al que hemos calculado.

Calcule el ancho de los bloques y luego compruebe los cálculos mediante medición:

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