flex-grow

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.

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. La valeur par défaut est 0.

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
Valeur calculéecomme spécifié
Type d'animationun nombre

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi