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 par box-sizing.

/* 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;

Valeur initialeauto
Applicabilitééléments flexibles, y compris les pseudo-éléments intégrés dans le flux
Héritéenon
Pourcentagesse rapporte à la principale taille interne du conteneur flexible
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquela longueur ou le pourcentage avant le mot-clé si les deux sont présents

Syntaxe

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 nombre suivi d'une unité telle que px, mm, pt ou un pourcentage relatif à la taille principale du conteneur flexible. Les valeurs négatives ne sont pas autorisées.
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 ou height) avec auto.
Note : Voici un rapide historique pour cette propriété :
  • Au début, flex-basis:auto signifiait « se référer à ma propriété width ou height »
  • 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 ou height. L'implémentation dans Gecko a été suivie avec le bug bug 1032922.
  • Cette modification a été annulée avec le bug bug 1093316 afin qu'auto fasse à nouveau référence à la propriété height ou width. Le mot-clé content a été introduit pour déclencher un dimensionnement automatique (c'est le bug bug 1105111 qui couvre cette implémentation).

Syntaxe formelle

content | <'width'>

Exemples

HTML

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">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: -webkit-max-content;
  flex-basis: -moz-max-content;
  flex-basis: max-content;
}

.flex2:after {
  content: 'max-content';
}

.flex3 {
  flex-basis: -webkit-min-content;
  flex-basis: -moz-min-content;
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

.flex4 {
  flex-basis: -webkit-fit-content;
  flex-basis: -moz-fit-content;
  flex-basis: fit-content;
}

.flex4:after {
  content: 'fit-content';
}

.flex5 {
   flex-basis: content;
}

.flex5:after {
  content: 'content';
}

.flex6 {
  flex-basis: -webkit-fill-available;
  flex-basis: -moz-available;
  flex-basis: fill;
}

.flex6:after {
  content: 'fill/-webkit-fill-available/-moz-available';
}

Résultat

Spécifications

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'flex-basis' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple21 -webkit-

Oui

Oui -webkit-

221

49 -webkit-

44 -webkit- 2

18 — 283

114

12.1

15 -webkit-

9

7 -webkit-

auto21 Oui181112.17 -webkit-
content Non Oui Non Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple ? ?

Oui

Oui -webkit-

221

49 -webkit-

44 -webkit- 2

18 — 283

Non

12.1

15 -webkit-

9.2
auto ? ? Oui18 ?12.1 ?
content ? Non Oui Non Non Non Non

1. Since Firefox 28, multi-line flexbox is supported.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. When a non-auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, kristofbc
 Dernière mise à jour par : SphinxKnight,