W3docs
fr
Se connecter

Propriété CSS flex-grow

The flex-grow property defines how much the item will grow. See the values of this property and try some examples.

La propriété flex-grow spécifie de combien un élément peut grandir par rapport aux autres éléments du conteneur flex. Si tous les éléments du conteneur ont un facteur flex-grow défini, ils se partagent l'espace libre restant de manière proportionnelle selon leurs facteurs. La taille principale d'un élément flexible est soit sa hauteur, soit sa largeur, selon la valeur de flex-direction.

Cette propriété fait partie des propriétés CSS3. Elle est utilisée conjointement avec les propriétés flex-shrink et flex-basis.

info

S'il n'y a pas d'éléments flexibles, la propriété flex-grow n'aura aucun effet.

Valeur initiale0
S'applique àÉléments flex, y compris les pseudo-éléments en flux.
HéritéeNon.
AnimableOui. Les éléments sont animables.
VersionCSS3
Syntaxe DOMobject.style.flexGrow = 3;

Syntaxe

Syntaxe de la propriété CSS flex-grow

flex-grow: number | initial | inherit;

Exemple de la propriété flex-grow :

Exemple de la propriété CSS flex-grow avec une valeur numérique

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 2px solid #cccccc;
        display: flex;
      }
      .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>Flex-grow property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>
Essayez vous-même »

Résultat

Propriété CSS flex-grow

Exemple de la propriété flex-grow avec un facteur de croissance plus élevé :

Propriété CSS flex-grow avec un nombre comme valeur

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 2px solid #cccccc;
        display: flex;
      }
      .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>Flex-grow property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescriptionTester »
numberSpécifie de combien l'élément peut grandir par rapport aux autres éléments flexibles du même conteneur. La valeur par défaut est 0.Tester »
initialRéinitialise la propriété à sa valeur par défaut.Tester »
inheritHérite de cette propriété depuis l'élément parent.

Practice

Pratique

Quelle est la fonction de la propriété 'flex-grow' en CSS ?