La propriété flex-grow indique le facteur de grossissement d'un élément flexible. Elle indique la quantité d'espace que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.

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

<number>
Un nombre (type <number> qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides.

Syntaxe formelle

<number>

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 initiale0
Applicabilitééléments flexibles, y compris les pseudo-éléments intégrés dans le flux
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationun nombre
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple21 -webkit-

12

12 -webkit-

201

18 — 202

113

12.1

15 -webkit-

6.1 -webkit-
<0 animate49 ?324 ? Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ?

Oui

Oui -webkit-

201

18 — 202

12.1

15 -webkit-

? ?
<0 animate ? ? ?324 Non Non ?

1. Since Firefox 28, multi-line flexbox is supported.

2. From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Supported as -ms-flex-positive.

4. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, mondayking
 Dernière mise à jour par : SphinxKnight,