Régulation de la compression des blocs flex en CSS

Par défaut, des morceaux sont pincés de tous les éléments, proportionnellement à la largeur de l'élément. Cependant, il est possible de faire en sorte que certains éléments voient des morceaux plus grands ou plus petits pincés. Pour cela, il existe une propriété spéciale flex-shrink.

Cette propriété représente un certain poids, par lequel la largeur de l'élément sera multipliée lors du calcul du morceau à pincer selon la formule déjà mentionnée ci-dessus. Par exemple, si la largeur de l'élément est de 200px, et que son flex-shrink est de 3, alors la largeur pondérée (c'est-à-dire multipliée par le poids) de l'élément sera de :

200px * 3 = 600px

La formule prenant en compte flex-shrink aura la forme suivante : espace libre négatif * (largeur pondérée de l'élément / somme de toutes les largeurs pondérées des éléments).

Regardons un exemple. Supposons que nous ayons 4 éléments. Supposons que la largeur du premier élément soit de 400px, et que son flex-shrink soit de 2, la largeur des autres éléments est de 200px, et leur flex-shrink est de 1. Supposons que la largeur du parent soit de 900px.

La largeur totale des éléments est de :

400px + 3 * 200px = 1000px

L'espace libre négatif sera de :

1000px - 900px = 100px

La largeur pondérée totale des éléments est de :

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

La largeur pondérée du premier élément est de :

400px * 2 = 800px

Le morceau suivant sera pincé du premier élément :

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

La largeur de l'élément sera de :

400px - 57.14px = 342.86px ~ 343px

La largeur pondérée de chacun des autres éléments est de :

200px * 1 = 200px

Le morceau suivant sera pincé de chaque élément :

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

La largeur de l'élément sera de :

200px - 14.2px = 185.8px ~ 186px

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;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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 class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}