flex-basis

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.

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

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

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é weight 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é Firefox (Gecko) Chrome Edge Internet Explorer Edge Opera Safari
Support simple 18.0 (18.0)[1]
22.0 (22.0)[2]
21.0-webkit (Oui) 11[3] 12 12.10 7.0-webkit[4]
auto 18.0 (18.0) 21.0 ? 11 12 12.10 7.0-webkit
content Pas de support[5] Pas de support ? Pas de support 12 Pas de support Pas de support
Fonctionnalité Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Support simple ? ? (Oui) Pas de support 12.10 Pas de support

[1] Pour Firefox 18 et 19, l'utilisateur devait activer la préférence layout.css.flexbox.enabled avec true. Firefox prend en charge les boîtes flexibles sur plusieurs lignes à partir de Firefox 28.

[2] En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[3] Lorsque flex-basis est différent d'auto, pour Internet Explorer 10-11, le moteur utilise toujours la boîte de contenu pour calculer la taille d'un élément flexible même si on applique box-sizing: border-box à l'élément. Voir Flexbug #7 pour plus d'informations.

[4] Voir Safari 7.0.

[5] Voir bug 1105111.

Voir aussi

Étiquettes et contributeurs liés au document

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