Propriété CSS flex-basis

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.