Propriété CSS flex-basis

La propriété flex-basis définit la taille principale initiale de l'élément flexible. Quand la propriété flex-basis n'est pas incluse, sa valeur est définie à 0%.

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

Valeur initiale auto
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.flexBasis = "100px";

Syntaxe

flex-basis: number | auto | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      width: 300px;
      height: 80px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 0; /* Safari 6.1+ */
      -webkit-flex-shrink: 0; /* Safari 6.1+ */
      -webkit-flex-basis: 50px; /* Safari 6.1+ */
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-basis: 150px; /* Safari 6.1+ */
      flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex-basis</h2>
    <div class="box">
      <div style="background-color: #eee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #ccc;">40px</div>
      <div style="background-color: #666;">40px</div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
number Spécifie la longueur de l'élément par "auto", "inherit", ou un nombre suivi par "%", "px", "em" etc.
auto C'est la valeur initiale de cette propriété. La longueur est égale à la langueur de l'élément flexible. S'il n'y a pas la longueur de l'élément spécifiée, elle sera par rapport à son contenu.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Trouvez-vous cela utile?

Articles Associées