w3docs logo

Propriété CSS flex-grow

La propriété flex-grow spécifie le facteur d'expansion d'un élément flexible relativement au reste des éléments du conteneur flex. Si tous les éléments du conteneur sont spécifiés par le facteur flex-grow, alors tous les éléments partagent l'espace disponible.

La propriété flex-grow est utilisée avec les propriétés flex-shrink et flex-basis.

S'il n'y a pas des éléments flexibles, la propriété flex-grow n'aura aucun effet.
Valeur initiale 0
Appliquée à Éléments flex, y compris pséudo-éléments entrants.
Héritée Non.
Animable Oui. Les éléments sont animables.
Version CSS3
Syntaxe DOM object.style.flexGrow = "3";

Syntaxe

flex-grow: number | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 2px solid #ccc;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 2;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .box div:nth-of-type(1) {flex-grow: 1;}
      .box div:nth-of-type(2) {flex-grow: 2;}
      .box div:nth-of-type(3) {flex-grow: 1;}
      .box div:nth-of-type(4) {flex-grow: 1;}
      .box div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex-grow</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Dans l'exemple suivant, l'élément bleu augmente par 6px.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 2px solid #ccc;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 6;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .box div:nth-of-type(1) {flex-grow: 1;}
      .box div:nth-of-type(2) {flex-grow: 6;}
      .box div:nth-of-type(3) {flex-grow: 1;}
      .box div:nth-of-type(4) {flex-grow: 1;}
      .box div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex-grow</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
number Spécifie le facteur de grossissement de l'élément relativement aux éléments flexibles du même conteneur. La valeur initiale est 0.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Pratiquez vos connaissances

Qu'est-ce que la propriété CSS 'flex-grow' fait exactement?
Trouvez-vous cela utile?