w3docs logo

Propriété CSS flex

La propriété flex spécifie les components d'une longueur flexible. C'est une propriété raccourcie pour les propriétés flex-grow, flex-shrink et flex-basis. Les propriétés flex-shrink et flex-basis sont facultatives, i.e. vous ne devez pas les comprendre dans la déclaration flex.

La propriété flex est une partie de Le guide ultime de Flexbox. S'il n'y a pas des éléments flexibles, la propriété flex n'aura aucun effet.

Quand on ne comprend pas la propriété flex-grow dans la déclaration raccourcie, la valeur est initialement définie à 1. Quand on ne comprend pas la propriété flex-shrink dans la déclaration en sténo, la valeur est initialement définie à 1. Notez, que le facteur flex-shrink est multiplié par flex-basis quand l'espace négatif est distribué. Quand la propriété flex-basis n'est pas comprise, sa valeur est définie à 0%.

"Auto" est la valeur initiale de la propriété flex. Cette valeur donne une taille à l'élément sur la base des propriétés width/height. (Si la propriété de la taille principale de l'élément compute à "auto", cela va donner une taille à flex sur la base de ses contenus.)

"Initial" donne une taille à l'élément sur la base de ses propriétés width/height (ou ses contenus). Elle fait l'élément flex inflexible quand il reste quelque espace libre , mais elle le permet de rétrécir au minimum quand il n'y a pas d'espace suffisant. Les capacités d'alignement ou les marges auto peuvent être utilisés pour aligner les éléments flex le long de l'axe principal.

"None" est dimensionné par rapport aux propriétés width et height. Cela est totalement inflexible.

Les valeurs initiales des propriétés flex-grow et flex-shrink différencient de ses valeurs par défaut quand elles ne sont pas comprises dans la déclaration raccourcie flex afin qu'il puisse mieux accueillir les cas courants.
Valeur initiale 0 1 auto
Appliquée à Éléments flex, y compris pséudo-éléments entrants.
Héritée Non.
Animable Oui.
Version CSS3
Syntaxe DOM Object.style.flex = "1";

Syntaxe

flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <title>Titre du document</title>
  <head>
    <style> 
      .box {
      width: 350px;
      height: 200px;
      padding-left: 0;
      list-style-type: none;	
      border: 1px dashed black;
      display: -webkit-flex;
      display: flex;
      }
      .box div {
      flex: 1;
      }
      .green {background-color: #8ebf42}
      .blue {background-color: #1c87c9;}
      .gray {background-color: #666}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
    </div>
  </body>
</html>

Exemple, où l'un des éléments augmente.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      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: 4;}
      .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 */
      .example div:nth-of-type(1) {flex-grow: 1;}
      .example div:nth-of-type(2) {flex-grow: 4;}
      .example div:nth-of-type(3) {flex-grow: 1;}
      .example div:nth-of-type(4) {flex-grow: 1;}
      .example div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Exemple de 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>

Un autre exemple avec les valeurs flex-shrink et flex-shrink comprises.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 1; /* Safari 6.1+ */
      -webkit-flex-shrink: 2; /* Safari 6.1+ */
      -webkit-flex-basis: 100px; /* Safari 6.1+ */
      flex-grow: 1;
      flex-shrink: 2;
      flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-shrink: 5; /* Safari 6.1+ */
      flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de flex-shrink</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
flex-grow Spécifie le facteur d'expansion d'un élément flexible relativement au reste des éléments du même conteneur.
flex-shrink Définit le facteur de rétrécissement d'un élément flexible relativement au reste des éléments du même conteneur.
flex-basis Spécifie la longueur de l'élément par "auto", "inherit", ou un nombre suivi par "%", "px", "em" etc.
auto Equivalent à 1 1 auto.
initial Equivalent à 1 0 auto.
none Equivalent à 0 0 auto.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
29.0+
21-28 -webkit- 		28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Pratiquez vos connaissances

Qu'est-ce que la propriété CSS 'flex' ?
❮ Précédent Suivant ❯
Trouvez-vous cela utile?