Propriété CSS flex-basis

La propriété flex-basis spécifie la taille principale initiale d'un élément flexible. Lorsque cette propriété n'est pas spécifiée, sa valeur initiale est auto.

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

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

Lorsque flex-basis est défini sur une longueur ou un pourcentage spécifique, il prend le pas sur width (ou height si flex-direction est column) pour déterminer la taille principale initiale de l'élément.

Remarque : La propriété raccourcie flex définit flex-basis ainsi que flex-grow et flex-shrink. Si flex est spécifié, il prend le pas sur la propriété flex-basis autonome.

Valeur initiale	auto
S'applique à	Éléments flexibles, y compris les pseudo-éléments en flux.
Héritée	Non.
Animable	Oui. Les éléments sont animables.
Version	CSS3
Syntaxe DOM	object.style.flexBasis = "100px";

Syntaxe

Syntaxe de la propriété CSS flex-basis

css

flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;

Exemple de base

Exemple de la propriété CSS flex-basis

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 80px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
        flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #cccccc;">40px</div>
      <div style="background-color: #666666;">40px</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS flex-basis

Exemple avec toutes les valeurs

Exemple de la propriété flex-basis avec toutes les valeurs :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 60px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 40%;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        flex-basis: auto;
        background-color: yellow;
      }
      .box div:nth-of-type(4) {
        flex-basis: initial;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        flex-basis: inherit;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        number 60px
      </div>
      <div>
        percentage 40%
      </div>
      <div>
        auto
      </div>
      <div>
        initial
      </div>
      <div>
        inherit
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Exemple avec des valeurs en pixels

Exemple de la propriété flex-basis spécifiée en pixels :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 460px;
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 70px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 100px;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        background-color: #1c87c9;
      }
      .box div:nth-of-type(4) {
        flex-basis: 150px;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        70px
      </div>
      <div>
        100px
      </div>
      <div>
        70px
      </div>
      <div>
        150px
      </div>
      <div>
        70px
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
length \| percentage	Spécifie une taille fixe à l'aide d'unités comme px, em, rem, ou un pourcentage (%).	Tester »
auto	La valeur par défaut. La taille de l'élément est déterminée par son contenu ou les propriétés width/height.	Tester »
initial	Définit la propriété sur sa valeur par défaut.	Tester »
inherit	Hérite cette propriété de son élément parent.
min-content	Dimensionne l'élément en fonction de la largeur/hauteur minimale du contenu.	Tester »
max-content	Dimensionne l'élément en fonction de la largeur/hauteur maximale du contenu.	Tester »
fit-content	Dimensionne l'élément en fonction de la fonction fit-content.	Tester »
content	Dimensionne l'élément en fonction de son contenu.	Tester »

Pratique

Que fait la propriété 'flex-basis' en CSS ?

Elle définit la taille d'un élément flexible.Elle change la couleur d'un élément flexible.Elle définit la taille principale initiale d'un élément flexible.Elle contrôle entièrement l'ordre des éléments flexibles.Elle supprime un élément flexible.

Propriété CSS flex-basis ​

Syntaxe ​

Exemple de base ​

Résultat ​

Exemple avec toutes les valeurs ​

Exemple avec des valeurs en pixels ​

Valeurs ​

Pratique ​

Propriété CSS flex-basis

Syntaxe

Exemple de base

Résultat

Exemple avec toutes les valeurs

Exemple avec des valeurs en pixels

Valeurs

Pratique