L'avidité des éléments flex en CSS
Supposons que nous ayons maintenant deux blocs flex,
alignés en ligne. Ces blocs ont une largeur
de 100px, et leur parent - 300px :
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Comme vous le voyez, la largeur totale de nos éléments est inférieure à la largeur du parent, donc un espace vide reste à droite.
Si souhaité, 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.
Voyons en pratique comment fonctionne cette propriété.
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 qu'un espace libre
de 100px reste.
Si les éléments n'ont pas de flex-grow,
alors nous verrons simplement cet espace libre.
S'il est défini, alors la largeur réelle des éléments
sera supérieure à celle définie - ils se partageront
proportionnellement l'espace libre
et l'ajouteront à leur largeur.
Par exemple, laissons le premier élément avoir un flex-grow
égal à 1, et le second - 3. Calculons
quelle partie de l'espace libre
chaque élément recevra.
Pour commencer, nous devons obtenir la quantité totale
d'unités de flex-grow de tous nos éléments.
Pour le premier élément, il est de 1, et
pour le second - 3. Cela signifie qu'au total
il est de 4.
Divisons maintenant les 100px d'espace libre
par 4 et obtenons que 25px revient
à une unité de flex-grow. Il en résultera
que le premier élément ajoutera une unité
de flex-grow, soit 25px, et
le second - trois unités, soit
75px.
La largeur du premier élément sera de 125px,
et celle du second - 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 - 100px. Il en résultera
que l'espace libre est à nouveau
de 100px.
Définissons pour chaque élément un flex-grow,
égal à 1. La somme sera de 2,
ce qui signifie que les 100px d'espace libre
doivent être divisés par 2. Il en résultera que
50px revient à une
unité d'avidité.
Comme tous les éléments ont la même valeur
de flex-grow, alors tous les éléments ajouteront
la même valeur de 50px. Cela signifie
que le premier élément deviendra 250px, et
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.
Définissons maintenant pour le premier élément
flex-grow à la valeur 3, et pour le second
- à la valeur 1. Il en résultera que l'avidité
totale est de 4. Alors une unité
d'avidité est égale à 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;
}
:
Tâches pratiques
Dans toutes les tâches ci-dessous, vous verrez
un certain code avec des éléments flex ayant
une largeur et un flex-grow. À partir du code
présenté, calculez quelles dimensions aura
chacun des éléments. 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: 3;
}
.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: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<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: 100px;
flex-grow: 1;
}
.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 class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
