flex

La propriété flex est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.

Les propriétés détaillées correspondantes à cette propriété raccourcie sont flex-grow, flex-shrink et flex-basis.

Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.

Pour la plupart des cas, on utilisera une des valeurs suivantes : auto, initial, none ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :

Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer min-width ou min-height.

Voir la page Utiliser les boîtes flexibles (flexbox) CSS pour plus d'informations.

Syntaxe

/* Valeurs de base */
flex: auto;
flex: initial;
flex: none;

/* Une valeur sans unité pour flex-grow */
/* flex-basis vaut alors 0 */
flex: 2;

/* Une valeur, largeur/hauteur: flex-basis */
flex: 10em;
flex: 30px;
flex: content;

/* Deux valeurs : flex-grow | flex-basis */
flex: 1 30px;

/* Deux valeurs : flex-grow | flex-shrink */
/* flex-basis vaut alors 0 */
flex: 2 2;

/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Valeurs globales */
flex: inherit;
flex: initial;
flex: unset;

La propriété flex peut être définie avec une, deux ou trois valeurs.

  • Avec une valeur, la syntaxe doit être :
    • un nombre sans unité (<number>) : celui-ci est alors interprété comme la valeur de <flex-grow>
    • ou une valeur de largeur valide (width) : celle-ci est alors interprétée comme la valeur de <flex-basis>
    • ou le mot-clé none.
  • Avec deux valeurs
    • la première doit être un nombre sans unité (<number>) qui correspond à la valeur de <flex-grow>.
    • la seconde valeur doit être :
      • un nombre sans unité (<number>) : celui-ci est alors interprété comme la valeur de <flex-shrink>
      • ou une valeur de largeur valide (width) : celle-ci est alors interprétée comme la valeur de <flex-basis>
  • Avec trois valeurs
    • la première valeur doit être un nombre sans unité (<number>) : celui-ci est alors interprété comme la valeur de <flex-grow>
    • la deuxième valeur doit être un nombre sans unité (<number>) : celui-ci est alors interprété comme la valeur de <flex-shrink>
    • la troisième valeur doit être une valeur de largeur valide (width) : celle-ci est alors interprétée comme la valeur de <flex-basis>

Valeurs

auto
L'élément est dimensionné selon ses propriétés width et height mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "flex: 1 1 auto".
initial
L'élément est dimensionné selon ses propriétés width et height. Ce comportement est équivalent à la valeur par défaut (0 1 auto). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "flex: 0 1 auto".
none
L'élément est dimensionné par rapport à ses propriétés width et height. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "flex: 0 0 auto".
<'flex-grow'>
Voir flex-grow. Les valeurs négatives sont interdites et la valeur par défaut est 1.
<'flex-shrink'>
Voir flex-shrink. Les valeurs négatives sont interdites et la valeur par défaut est 1.
<'flex-basis'>
Voir flex-basis. Une valeur valide pour width et height. La valeur par défaut est 0.
Note : Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, flex-basis vaudra 0. Pour plus d'informations, voir le brouillon de spécification du module des boîtes flexibles.

Syntaxe formelle

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Exemples

CSS

#flex-container {
	display: flex;
	flex-direction: row;
}

#flex-container > .flex-item {
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

HTML

<div id="flex-container">
    <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div>
    <div class="raw-item" id="raw">Boîte « normale » </div>
</div>

JavaScript

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
	raw.style.display = raw.style.display == "none" ? "block" : "none";
});
#flex-container {
	width: 100%;
	font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
	border: 1px solid #f00;
	padding: 1rem;
}

#flex-container > .raw-item {
	border: 1px solid #000;
}

Résultat

Spécifications

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

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments flexibles, y compris les pseudo-éléments intégrés dans le flux
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • flex-grow: comme spécifié
  • flex-shrink: comme spécifié
  • flex-basis: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi