flex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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.

Exemple interactif

Description

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

css
/* 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.

Définition formelle

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 :

Syntaxe formelle

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

Exemples

CSS

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

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

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

HTML

html
<div id="flex-container">
  <div class="flex-item" id="flex">
    Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale »)
  </div>
  <div class="raw-item" id="raw">Boîte « normale »</div>
</div>

JavaScript

js
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
css
#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

Specification
CSS Flexible Box Layout Module Level 1
# flex-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi