Dans un conteneur Flexbox, chaque élément peut réagir différemment à l'espace disponible : certains doivent grandir pour combler le vide, d'autres doivent garder une taille fixe, d'autres encore ne devraient jamais rétrécir en dessous d'une certaine largeur. La propriété flex condense ces trois comportements en une seule déclaration.
On la rencontre dès qu'une mise en page doit répartir l'espace de façon inégale entre les éléments : une barre latérale de largeur fixe à côté d'un contenu principal qui occupe tout le reste, ou trois colonnes dont une seule doit s'étirer davantage que les autres.
Définition
flex est un raccourci qui combine trois propriétés en une seule déclaration : flex-grow, flex-shrink et flex-basis, dans cet ordre. Elle se pose sur un élément flexible, jamais sur le conteneur.
.element {
flex: 1 1 200px;
}Ici, l'élément peut grandir (1), peut rétrécir (1), et sa taille de départ avant tout calcul est de 200 pixels (200px). Ces trois valeurs répondent chacune à une question précise.
Les trois propriétés en détail
| Propriété | Question à laquelle elle répond | Valeur par défaut |
|---|---|---|
flex-grow | L'élément grandit-il pour occuper l'espace restant ? | 0 |
flex-shrink | L'élément rétrécit-il si la place manque ? | 1 |
flex-basis | Quelle est sa taille de départ, avant tout calcul ? | auto |
flex-grow et flex-shrink acceptent des nombres qui fonctionnent comme des proportions relatives : un élément avec flex-grow: 2 grandit deux fois plus vite qu'un élément avec flex-grow: 1, à supposer que les deux se disputent le même espace restant.
Les raccourcis les plus utilisés
Trois écritures reviennent si souvent que la plupart des développeurs ne posent presque jamais les trois valeurs séparément.
| Écriture | Équivalent complet | Effet |
|---|---|---|
flex: 1 | flex-grow: 1, flex-shrink: 1, flex-basis: 0% | L'élément occupe une part égale de l'espace disponible |
flex: auto | flex-grow: 1, flex-shrink: 1, flex-basis: auto | L'élément grandit et rétrécit à partir de sa taille naturelle |
flex: none | flex-grow: 0, flex-shrink: 0, flex-basis: auto | L'élément garde toujours sa taille naturelle, ne grandit ni ne rétrécit |
flex: 1, sans doute la plus utilisée des trois, fait grandir et rétrécir l'élément à partir d'une base de zéro : c'est ce qui permet à plusieurs éléments avec flex: 1 de partager exactement le même espace, quel que soit leur contenu.
Un exemple concret
Une mise en page classique avec une barre latérale fixe et un contenu principal extensible illustre bien l'intérêt de combiner deux valeurs de flex différentes.
.mise-en-page {
display: flex;
}
.barre-laterale {
flex: none;
width: 240px;
}
.contenu {
flex: 1;
}La barre latérale garde toujours ses 240 pixels grâce à flex: none, quelle que soit la largeur de l'écran, tandis que le contenu principal occupe automatiquement tout l'espace restant grâce à flex: 1.
Le piège : flex-shrink ne descend jamais sous zéro
flex-shrink accepte n'importe quel nombre positif ou nul, mais jamais de valeur négative. Écrire flex-shrink: -1 pour empêcher un élément de rétrécir n'a aucun effet ; c'est une valeur invalide, silencieusement ignorée par le navigateur, qui retombe sur la valeur par défaut.
flex-shrink: 0, pas un nombre négatif. flex-shrink: 0 combiné à une flex-basis fixe garantit qu'un élément, comme un logo ou une icône, garde toujours sa taille exacte, même quand ses voisins se compriment.Questions fréquentes
flex-basis et une propriété de dimensionnement comme width ?flex-basis fixe la taille de départ d'un élément avant que flex-grow et flex-shrink n'entrent en jeu, alors que Dimensionnement CSS comme width fixe une taille indépendante de ce calcul flex. Quand flex-basis vaut une valeur autre que auto, elle prend le pas sur width sur l'axe principal, ce qui surprend souvent les développeurs qui pensent contrôler la taille avec width seul.
flex-basis ?Oui, et c'est même très courant pour créer des colonnes proportionnelles à la largeur du conteneur, par exemple flex-basis: 33% pour trois colonnes égales. Combiné à flex-wrap, cela permet de créer une grille de cartes qui se réorganise automatiquement sur plusieurs lignes.
flex: 1 et flex: auto donnent-ils le même résultat ?Non, malgré une confusion fréquente. flex: 1 part d'une base de zéro et répartit tout l'espace disponible également, ignorant la taille naturelle du contenu. flex: auto part de la taille naturelle du contenu, puis grandit ou rétrécit à partir de cette base, ce qui donne des largeurs inégales si le contenu des éléments diffère en longueur.