Propriété CSSFlexbox

flex-basis

Fixe la taille de départ d’un élément flex sur l’axe principal, avant qu’il ne commence à grandir ou à rétrécir.

Valeur initiale: auto
Héritée: Non
Animable: oui, en tant que longueur ou pourcentage
S’applique à: éléments flex
JavaScript: element.style.flexBasis = "200px"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.columns > * {
  flex: 1 1 180px;
}

Aperçu

Définition et utilisation

La propriété flex-basis définit le point de départ de la taille d’un élément sur l’axe principal. Chaque élément reçoit d’abord sa taille de base, et c’est seulement après que l’espace libre ou manquant se répartit selon flex-grow et flex-shrink.

Avec auto, l’élément regarde son width (ou height en colonne), et s’il n’en a pas, la taille de son contenu. La valeur 0 signifie un départ à zéro, ce qui donne des tailles exactement égales aux éléments quand leur flex-grow est le même.

Dans un conteneur avec flex-direction: column, flex-basis concerne la hauteur, et non la largeur.

Syntaxe

flex-basis: auto | content | <longueur> | <pourcentage>;

Valeurs

auto
Le point de départ est le contenu, donc les éléments ont des largeurs différentes.
0
Tous démarrent à zéro, donc avec un grow égal, ils ont la même largeur.
100px
<longueur>
Chaque élément démarre à 100px et partage le reste de l’espace.
50%
<pourcentage>
La taille de base est la moitié du conteneur, donc les éléments doivent rétrécir.

Valeur	Type	Description
auto		Le point de départ est le contenu, donc les éléments ont des largeurs différentes.
0		Tous démarrent à zéro, donc avec un grow égal, ils ont la même largeur.
100px	<longueur>	Chaque élément démarre à 100px et partage le reste de l’espace.
50%	<pourcentage>	La taille de base est la moitié du conteneur, donc les éléments doivent rétrécir.

Valeurs en pratique

auto

Le point de départ est le contenu, donc les éléments ont des largeurs différentes.

.demo .box { flex-basis: auto; }

Tous démarrent à zéro, donc avec un grow égal, ils ont la même largeur.

.demo .box { flex-basis: 0; }

100px

Chaque élément démarre à 100px et partage le reste de l’espace.

.demo .box { flex-basis: 100px; }

50%

La taille de base est la moitié du conteneur, donc les éléments doivent rétrécir.

.demo .box { flex-basis: 50%; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

L’écriture flex: 1 1 200px est une façon simple d’obtenir des colonnes qui passent à la ligne quand c’est trop étroit.
Si vous réglez à la fois width et flex-basis, c’est flex-basis qui l’emporte (sauf avec la valeur auto).

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours