Avarice nulle des éléments flex en CSS

Si flex-grow est égal à zéro pour un élément, alors cet élément ne participera pas à la distribution de l'espace libre. Par défaut, l'avidité a justement une valeur nulle et c'est pourquoi les éléments sans flex-grow défini ne se partagent pas l'espace libre entre eux.

Prenons un exemple avec un calcul. Supposons que nous ayons trois éléments flex, chacun avec une largeur de 100px. Supposons que le premier élément n'ait pas de flex-grow (ou qu'il soit égal à 0), que le deuxième élément ait un flex-grow égal à 2, et le troisième - égal à 3.

Supposons que la largeur du parent soit de 500px. Alors l'espace libre sera égal à 200px, et pour une unité de flex-grow on aura 200px / 5 = 40px. Il en résultera que la largeur du premier élément restera de 100px, puisqu'il ne participe pas à la distribution, la largeur du deuxième sera de 100px + 2 * 40px = 180px, et la largeur du troisième - de 100px + 3 * 40px = 220px.

Problèmes pratiques

Dans tous les problèmes ci-dessous, vous verrez un code avec des éléments flex ayant une largeur et un flex-grow. À partir du code présenté, calculez les dimensions que chaque élément aura. Ensuite, exécutez le code et vérifiez vos calculs en mesurant les largeurs réelles des éléments.

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