Propriété flex-grow

La propriété flex-grow détermine à quel point un bloc flex individuel peut être plus grand que les éléments adjacents, si cela est nécessaire.

Par exemple, si tous les blocs flex à l'intérieur d'un conteneur flex ont flex-grow:1, ils auront la même taille. Si l'un d'eux a flex-grow:2, il sera 2 fois plus grand que tous les autres.

Si la largeur totale des éléments est inférieure à la largeur du parent, il reste donc de l'espace vide à droite. Si on le souhaite, cet espace vide peut être réparti proportionnellement entre nos éléments. Cela se fait à l'aide de la propriété flex-grow, définie pour les éléments flex. La valeur de cette propriété est un nombre sans dimension.

S'applique à : un bloc flex spécifique.

Cette propriété fait partie intégrante de la propriété raccourcie flex.

Syntaxe

sélecteur {
	flex-grow: nombre positif;
}

Valeur par défaut : 0.

Exemple

Actuellement, nous avons deux blocs flex avec une largeur de 100px. Leur largeur totale est de 200px, et la largeur du parent est de 300px. Il en résulte un espace libre restant de 100px.

Si les éléments n'ont pas de flex-grow défini, nous verrons simplement cet espace libre. S'il leur est attribué, la largeur réelle des éléments sera supérieure à celle définie - ils se partageront proportionnellement l'espace libre entre eux et l'ajouteront à leur largeur.

Par exemple, supposons que le premier élément ait une valeur flex-grow égale à 1, et le second à 3. Calculons quelle partie de l'espace libre chaque élément recevra.

Il faut d'abord obtenir le nombre total d'unités flex-grow de tous nos éléments. Pour le premier élément, il est de 1, et pour le second de 3. Cela signifie qu'au total il est égal à 4.

Divisons maintenant les 100px d'espace libre par 4 et nous obtenons que 25px revient à une unité de flex-grow. Il en résulte qu'au premier élément s'ajoutera une unité de flex-grow, soit 25px, et au second - trois unités, soit 75px.

La largeur du premier élément sera de 125px, et celle du second de 175px :

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

Exemple

Supposons maintenant que la largeur du parent soit de 400px, la largeur du premier élément de 200px, et la largeur du second élément de 100px. Il en résulte que l'espace libre est à nouveau égal à 100px.

Attribuons à chaque élément une valeur flex-grow égale à 1. La somme sera de 2, ce qui signifie que les 100px d'espace libre doivent être divisés par 2. Il en résulte que 50px revient à une unité d'avidité.

Comme tous les éléments ont la même valeur de flex-grow, la même valeur de 50px sera ajoutée à tous les éléments. Cela signifie que le premier élément deviendra 250px, et que le second deviendra 150px :

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Exemple

Supposons à nouveau que la largeur du parent soit de 400px, la largeur du premier élément de 200px, et la largeur du second élément de 100px.

Attribuons maintenant au premier élément une valeur flex-grow de 3, et au second une valeur de 1. L'avidité totale sera égale à 4. Alors une unité d'avidité vaut 100px / 4 = 25px.

Au premier élément s'ajoutera 75px, et il deviendra 275px, et au second - 25px, il deviendra 125px :

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des blocs flex
la propriété justify-content,
qui définit l'alignement le long de l'axe principal
la propriété align-items,
qui définit l'alignement le long de l'axe transversal
la propriété flex-wrap,
qui définit le retour à la ligne des blocs flex
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété order,
qui définit l'ordre des blocs flex
la propriété align-self,
qui définit l'alignement d'un bloc spécifique
la propriété flex-basis,
qui définit la taille d'un bloc flex spécifique
la propriété flex-shrink,
qui définit la capacité de rétrécissement des blocs flex
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis