La propriétéflex-basis détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. Cette propriété détermine la taille de la boîte de contenu sauf si une autre boîte est visée parbox-sizing.

Exemple interactif

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;

<section>  <div>Item One</div>  <div>Item Two</div>  <div>Item Three</div></section>

.default-example {  border: 1px solid #c5c5c5;  width: auto;  max-height: 300px;  display: flex;}.default-example > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  margin: 10px;  flex-grow: 1;  flex-shrink: 1;  flex-basis: auto;}

Syntaxe

/* On définit une largeur */flex-basis: 10em;flex-basis: 3px;flex-basis: auto;/* On utilise les dimensions       *//* intrinsèques avec des mots-clés */flex-basis: fill;flex-basis: max-content;flex-basis: min-content;flex-basis: fit-content;/* La taille se calcule automatiquement *//* en fonction du contenu de l'élément  */flex-basis: content;/* Valeurs globales */flex-basis: inherit;flex-basis: initial;flex-basis: unset;

La propriétéflex-basis est définie grâce au mot-clécontent ou grâce à une valeur de type<'width'>.

Valeurs

<'width'>

Un longueur absolue (type<length> ou un pourcentage (type<percentage>)relatif à la taille principale du conteneur flexible ou encore le mot-cléauto. Les valeurs négatives ne sont pas autorisées. La valeur par défaut estauto.

content

Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.

Note :Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale (width ouheight) avecauto.

Note :Voici un rapide historique pour cette propriété :

• Au début,flex-basis:auto signifiait « se référer à ma propriétéwidth ouheight »
• Ensuite,flex-basis:auto a été modifiée pour indiquer un dimensionnement automatique et le mot-clémain-size fut introduit pour faire référence à la propriétéwidth ouheight. L'implémentation dans Gecko a été suivie avec lebug Firefox 1032922.
• Cette modification a été annulée avec lebug Firefox 1093316 afin qu'auto fasse à nouveau référence à la propriétéheight ouwidth. Le mot-clécontent a été introduit pour déclencher un dimensionnement automatique (c'est lebug Firefox 1105111 qui couvre cette implémentation).

Définition formelle

Syntaxe formelle

flex-basis =
content|
<'width'>

<width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Exemples

HTML

<ul>  <li>1: flex-basis test</li>  <li>2: flex-basis test</li>  <li>3: flex-basis test</li>  <li>4: flex-basis test</li>  <li>5: flex-basis test</li></ul><ul>  <li>6: flex-basis test</li></ul>

CSS

.container {  font-family: arial, sans-serif;  margin: 0;  padding: 0;  list-style-type: none;  display: flex;  flex-wrap: wrap;}.flex {  background: #6ab6d8;  padding: 10px;  margin-bottom: 50px;  border: 3px solid #2e86bb;  color: white;  font-size: 20px;  text-align: center;  position: relative;}.flex:after {  position: absolute;  z-index: 1;  left: 0;  top: 100%;  margin-top: 10px;  width: 100%;  color: #333;  font-size: 18px;}.flex1 {  flex-basis: auto;}.flex1:after {  content: "auto";}.flex2 {  flex-basis: max-content;}.flex2:after {  content: "max-content";}.flex3 {  flex-basis: min-content;}.flex3:after {  content: "min-content";}.flex4 {  flex-basis: fit-content;}.flex4:after {  content: "fit-content";}.flex5 {  flex-basis: content;}.flex5:after {  content: "content";}.flex6 {  flex-basis: fill;}.flex6:after {  content: "fill";}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• width
• Guide sur les boîtes flexibles :Les concepts de bases
• Guide sur les boîtes flexibles :Contrôler les proportions des boîtes flexibles le long de l'axe principal