Propriété flex CSS

La propriété flex définit les composants d'une longueur flexible. Il s'agit d'un raccourci pour les propriétés suivantes :

Les trois composants sont optionnels dans la déclaration raccourcie. Lorsqu'ils sont omis, flex-grow vaut par défaut 1, flex-shrink vaut par défaut 1, et flex-basis vaut par défaut auto. Notez que le facteur flex-shrink est multiplié par la valeur flex-basis lors de la distribution de l'espace négatif.

La propriété flex fait partie des propriétés CSS3.

Cette propriété fait partie du module Flexible Box Layout. S'il n'y a pas d'éléments flexibles, la propriété flex n'aura aucun effet.

Le mot-clé auto est équivalent à 1 1 auto. Il dimensionne l'élément en fonction des propriétés width/height. Si la propriété de taille principale de l'élément est définie sur auto, cela dimensionnera l'élément flexible en fonction de son contenu.

Le mot-clé initial est équivalent à 1 0 auto. Il dimensionne l'élément en fonction de ses propriétés width/height (ou de son contenu si non défini). Cela rend l'élément flexible rigide lorsqu'il reste de l'espace libre, et il ne rétrécira pas lorsqu'il n'y a pas assez d'espace. Les techniques d'alignement ou les marges automatiques sont utilisées pour aligner les éléments flexibles le long de l'axe principal.

Le mot-clé none est équivalent à 0 0 auto. Il dimensionne l'élément en fonction des propriétés width et height. Il est totalement rigide.

INFO

Remarque : Les valeurs initiales de flex-grow et flex-shrink diffèrent de leurs valeurs par défaut lorsqu'elles ne sont pas incluses dans la déclaration raccourcie flex, afin de mieux s'adapter aux cas courants.

Valeur initiale	0 1 auto
S'applique à	Éléments flexibles, y compris les pseudo-éléments en flux.
Héritée	Non.
Animable	Oui.
Version	CSS3
Syntaxe DOM	Object.style.flex = "1";

Syntaxe

Syntaxe de la propriété CSS flex

css

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

Les valeurs peuvent être spécifiées dans n'importe quel ordre. Lors de l'utilisation de flex-basis, vous pouvez également appliquer des contraintes min-width ou min-height pour empêcher l'élément de rétrécir en dessous d'une taille spécifiée.

Exemple de la propriété flex :

Exemple de la propriété CSS flex

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 350px;
        height: 200px;
        padding-left: 0;
        list-style-type: none;
        border: 1px dashed black;
        display: flex;
      }
      .box div {
        flex: 1;
      }
      .green {
        background-color: #8ebf42;
      }
      .blue {
        background-color: #1c87c9;
      }
      .gray {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Flex property example</h2>
    <div class="box">
      <div class="green">GREEN</div>
      <div class="blue">BLUE</div>
      <div class="gray">GRAY</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

Propriété flex CSS

Exemple de la propriété flex avec la valeur "flex-grow" :

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px solid #666;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 4;
      }
      .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 example</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>

Try it Yourself »

Exemple de la propriété flex avec la valeur "flex-shrink" :

Exemple de la propriété CSS flex avec la valeur flex-shrink

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 2;
        flex-basis: 100px;
      }
      
      .box div:nth-of-type(2) {
        flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink 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>

Try it Yourself »

Valeurs

Valeur	Description
flex-grow	Spécifie de combien l'élément doit grandir par rapport au reste des éléments flexibles du même conteneur.
flex-shrink	Spécifie de combien l'élément doit rétrécir par rapport au reste des éléments flexibles du même conteneur.
flex-basis	Spécifie la longueur de l'élément par "auto", "inherit", ou un nombre suivi de "%", "px", "em", etc.
auto	Équivalent à 1 1 auto.
initial	Équivalent à 1 0 auto.
none	Équivalent à 0 0 auto.
inherit	Hérite de cette propriété de son élément parent.

Propriété flex CSS ​

Syntaxe ​

Exemple de la propriété flex : ​

Résultat ​

Exemple de la propriété flex avec la valeur "flex-grow" : ​

Exemple de la propriété flex avec la valeur "flex-shrink" : ​

Valeurs ​

Pratique ​

Propriété flex CSS

Syntaxe

Exemple de la propriété flex :

Résultat

Exemple de la propriété flex avec la valeur "flex-grow" :

Exemple de la propriété flex avec la valeur "flex-shrink" :

Valeurs

Pratique