Propriété CSS flex-basis

La propriété flex-basis spécifie la taille principale initiale d'un élément flexible — la taille qu'il obtient avant que l'espace libre soit distribué par flex-grow ou réduit par flex-shrink. 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 et ne prend effet que sur les enfants d'un conteneur flex (un élément avec display: flex ou display: inline-flex). Si le parent n'est pas un conteneur flex, flex-basis n'a aucun effet.

Pourquoi utiliser flex-basis ?

Dans une mise en page Flexbox, la taille d'un élément est calculée en deux étapes :

Le navigateur lit le flex-basis de l'élément pour définir une taille de départ le long de l'axe principal.
Il agrandit ou réduit ensuite chaque élément à partir de cette taille de départ pour remplir (ou s'adapter à) le conteneur, selon flex-grow et flex-shrink.

Utilisez flex-basis lorsque vous souhaitez définir la taille idéale d'un élément tout en lui permettant de rester flexible. Par exemple, flex-basis: 200px signifie « viser 200 px, puis grandir/rétrécir à partir de là », tandis que width: 200px est une taille fixe que Flexbox est plus réticent à modifier.

flex-basis vs. width

Lorsque flex-basis est défini avec une longueur ou un pourcentage, il prend la priorité sur width (ou height, si flex-direction est column) pour déterminer la taille principale initiale de l'élément. La différence clé : flex-basis s'applique toujours le long de l'axe principal, il suit donc flex-direction. Avec flex-direction: row, il contrôle la largeur ; avec flex-direction: column, il contrôle la hauteur. Un simple width contrôle toujours la taille horizontale quelle que soit la direction.

Lorsque flex-basis: auto est utilisé, l'élément revient à son width/height (ou à la taille de son contenu si ceux-ci ne sont pas définis).

Remarque : Le raccourci flex définit flex-basis conjointement avec flex-grow et flex-shrink. Si vous écrivez flex, il prend la priorité sur une déclaration flex-basis autonome — placez donc flex-basis après flex, ou utilisez directement le raccourci pour éviter les surprises.

Valeur initiale	auto
S'applique à	Les éléments flex, y compris les pseudo-éléments dans le flux.
Héritage	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

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

<!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>

Essayez vous-même »

Résultat

Exemple avec toutes les valeurs

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

<!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>

Essayez vous-même »

Exemple avec des valeurs en pixels

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

<!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>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
length \| percentage	Une longueur absolue (`px`, `em`, `rem`) ou un pourcentage de la taille principale du conteneur flex. Les valeurs négatives sont invalides.	Essayer »
auto	La valeur par défaut. L'élément utilise sa propre `width`/`height` (ou la taille de son contenu si celles-ci ne sont pas définies) comme base.	Essayer »
initial	Réinitialise la propriété à sa valeur par défaut (`auto`).	Essayer »
inherit	Hérite de la valeur de l'élément parent.
min-content	Dimensionne l'élément à sa plus petite largeur de contenu possible (le mot ou élément le plus long insécable).	Essayer »
max-content	Dimensionne l'élément à sa plus grande largeur de contenu, sans retour à la ligne.	Essayer »
fit-content	Limite la taille entre `min-content` et `max-content`, comme la fonction `fit-content()`.	Essayer »
content	Dimensionne l'élément en fonction de son contenu, en ignorant tout `width`/`height` défini. Support navigateur limité.	Essayer »

Pièges courants

flex-basis n'a aucun effet en dehors d'un conteneur flex. Le parent doit avoir display: flex ou display: inline-flex.
Un flex-basis de 0 (ou 0%) combiné à flex-grow: 1 distribue l'espace proportionnellement selon le facteur de croissance uniquement, en ignorant la taille du contenu — c'est ainsi que fonctionnent de nombreuses mises en page à « colonnes égales ».
Les pourcentages sont calculés par rapport à la taille principale du conteneur, et non par rapport au viewport. Si le conteneur n'a pas de taille définie sur l'axe principal, un flex-basis en pourcentage peut se comporter comme auto.
Le raccourci flex écrase flex-basis. Écrire flex: 1 réinitialise la base à 0%, ce qui peut remplacer une déclaration flex-basis antérieure.

Propriétés associées

flex — le raccourci pour flex-grow, flex-shrink et flex-basis.
flex-grow — dans quelle mesure un élément grandit au-delà de sa base.
flex-shrink — dans quelle mesure un élément rétrécit en dessous de sa base.
Le guide ultime de Flexbox — le modèle Flexbox complet en un seul endroit.

Pratique

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

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