La propriété CSS flex-grow
définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.
La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de flex-direction
.
L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.
La plupart du temps flex-grow
est utilisé avec les autres propriétés flexibles flex-shrink
et flex-basis
. On pourra utiliser la propriété raccourcie flex
afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.
Syntaxe
flex-grow: 2;
flex-grow: 0.6;
/* Valeurs globales */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
La propriété flex-grow
se définit avec une valeur de type <number>
.
Valeurs
Syntaxe formelle
Exemples
HTML
<h4>A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
CSS
#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-shrink: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Flexible Box Layout Module La définition de 'flex-grow' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | 0 |
---|---|
Applicabilité | éléments flexibles, y compris les pseudo-éléments intégrés dans le flux |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | un nombre |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
flex-grow
est étrange ? un article (en anglais) écrit par Manuel Matuzovic sur CSS-Tricks et qui illustre le fonctionnement deflex-grow
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Contrôler les proportions des boîtes flexibles le long de l'axe principal