Facteur de compressibilité des blocs flex en CSS

Dans la leçon précédente, nous avons découvert que lorsque les éléments flex manquent d'espace, ils commencent à se comprimer. La différence entre la largeur totale et la largeur du parent est appelée l'espace libre négatif.

Techniquement, la compression signifie qu'un morceau de largeur est retiré de chaque élément afin que tous les éléments tiennent dans leur parent.

Faisons un calcul. Supposons, par exemple, que nous ayons 4 éléments d'une largeur de 200px. Supposons que la largeur du parent soit de 700px. Cela signifie que la largeur totale des éléments est de :

200px * 4 = 800px

Cette largeur est supérieure de 100px à la largeur du parent. Calculons combien il faut retirer à chaque élément pour qu'ils tiennent dans leur parent :

100px / 4 = 25px

Autrement dit, la largeur des éléments sera de :

200px - 25px = 175px

Implémentez les blocs décrits et vérifiez par mesure que la largeur des éléments est bien égale à celle que nous avons calculée.

Calculez la largeur des blocs, puis vérifiez les calculs par mesure :

<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;
}