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.

Note : Dans le cas où flex-basis (avec une valeur différente de auto) et width (ou height si flex-direction: column) sont définis pour un élément, c'est flex-basis qui a la priorité.

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.
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: 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

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.

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 22
Notes
Support complet 22
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Aucun support 18 — 28
Désactivée
Désactivée 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.
IE Support complet 11
Notes
Support complet 11
Notes
Notes 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.
Opera Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 22
Notes
Support complet 22
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Aucun support 18 — 28
Désactivée
Désactivée 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.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9.2Samsung Internet Android ?
autoChrome Support complet 21Edge Support complet 12Firefox Support complet 18IE Support complet 11Opera Support complet 12.1Safari Support complet 7
Préfixée
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 18Opera Android Support complet 12.1Safari iOS ? Samsung Internet Android ?
contentChrome Aucun support NonEdge Support complet 12Firefox Support complet 61IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 61Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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