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 :

<div class="flex-container">

   <div class="item auto">auto</div>
   <div class="item auto">auto</div>
   <div class="item auto">auto</div>

</div>

<div class="flex-container">

   <div class="item auto">auto</div>
   <div class="item initial">initial</div>
   <div class="item initial">initial</div>

</div>

<div class="flex-container">

   <div class="item auto">auto</div>
   <div class="item auto">auto</div>
   <div class="item none">none</div>

</div>

<div class="flex-container">

   <div class="item initial">initial</div>
   <div class="item none">none</div>
   <div class="item none">none</div>

</div>

<div class="flex-container">

   <div class="item four">4</div>
   <div class="item two">2</div>
   <div class="item one">1</div>

</div>

* {
  box-sizing: border-box;
}

.flex-container {
   background-color: #F4F7F8;
   resize: horizontal;
   overflow: hidden;
   display: flex;
   margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1B5385;
  color: white;
  font-family: monospace;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}

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 initiale	pour chaque propriété individuelle de la propriété raccourcie : `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Applicabilité	éléments flexibles, y compris les pseudo-éléments intégrés dans le flux
Héritée	non
Valeur calculée	pour 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'animation	pour chaque propriété individuelle de la propriété raccourcie : `flex-grow`: un nombre `flex-shrink`: un nombre `flex-basis`: une longueur, pourcentage ou calc() ;

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

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;
}