flex

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.

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

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.

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

• Guide sur les boîtes flexibles : Les concepts de bases
• Guide sur les boîtes flexibles : Contrôler les proportions des boîtes flexibles le long de l'axe principal