Par défaut, un conteneur Flexbox refuse obstinément de faire passer ses éléments à la ligne : ils se serrent tous sur une seule ligne, quitte à déborder du conteneur ou à se compresser jusqu'à devenir illisibles. flex-wrap est la propriété qui autorise, ou non, cette bascule.
On la rencontre dès qu'une mise en page doit s'adapter à des largeurs d'écran variées : une liste de tags qui doit s'organiser sur plusieurs lignes, une grille de vignettes de produits, ou une barre de navigation qui doit se réorganiser sur mobile sans media query dédiée.
Définition
flex-wrap est la propriété qui détermine si les éléments d'un conteneur flex peuvent se répartir sur plusieurs lignes (ou colonnes, selon la direction choisie par flex-direction) quand la place manque sur une seule.
.conteneur {
display: flex;
flex-wrap: wrap;
}Sans cette ligne, tous les éléments resteraient sur une seule ligne indéfiniment, aussi nombreux soient-ils.
Les trois valeurs
| Valeur | Effet |
|---|---|
nowrap | Tous les éléments restent sur une seule ligne, ils se compressent au besoin (comportement par défaut) |
wrap | Les éléments passent à la ligne suivante quand la place manque |
wrap-reverse | Comme wrap, mais les lignes s'empilent en sens inverse |
nowrap, la valeur par défaut, explique pourquoi tant de mises en page flex débordent horizontalement sur mobile sans qu'aucune erreur ne soit visible dans le code : le navigateur obéit simplement à la consigne implicite de tout garder sur une seule ligne.
Un exemple concret
Une liste de badges de compétences illustre bien le comportement de wrap : le nombre de badges n'est jamais connu à l'avance, et leur largeur totale dépasse presque toujours la largeur du conteneur sur un écran étroit.
.liste-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Avec flex-wrap: wrap, les badges qui ne tiennent plus sur la ligne courante basculent automatiquement sur la ligne suivante, sans qu'aucun calcul de largeur ne soit nécessaire.
Pourquoi presque toute grille flex responsive en a besoin
Dès qu'un conteneur flex affiche un nombre variable d'éléments, comme des cartes de produits ou des filtres de recherche, sa largeur totale dépasse tôt ou tard celle de l'écran. Sans flex-wrap: wrap, ces éléments se compresseraient horizontalement jusqu'à devenir illisibles, plutôt que de se réorganiser proprement sur plusieurs lignes.
C'est ce qui rend flex-wrap si utile en complément d'une Media query : une seule déclaration suffit souvent à obtenir un comportement responsive basique, là où une grille figée demanderait de recalculer un nombre de colonnes à chaque point de rupture.
Le lien avec align-content
Une fois plusieurs lignes créées par flex-wrap, une nouvelle question se pose : comment ces lignes elles-mêmes se répartissent-elles dans la hauteur du conteneur ? C'est le rôle de align-content, une propriété qui reste sans le moindre effet tant que flex-wrap vaut nowrap, puisqu'il n'existe alors qu'une seule ligne à positionner.
align-content à un conteneur qui n'a pas flex-wrap: wrap, et constater qu'il ne se passe rien. align-content n'agit que sur plusieurs lignes ; sans flex-wrap, tous les éléments restent sur une seule ligne, et il n'y a rien à répartir.Questions fréquentes
flex-wrap change-t-il aussi le comportement de gap ?gap continue de fonctionner normalement avec flex-wrap: wrap, mais son effet devient visible dans les deux dimensions à la fois : il espace les éléments sur une même ligne, et il espace également les lignes entre elles une fois qu'il y en a plusieurs, sans qu'aucune propriété supplémentaire ne soit nécessaire.
flex-wrap: wrap et une media query ?flex-wrap réagit à l'espace réellement disponible dans le conteneur, élément par élément, sans point de rupture fixe. Une media query réagit à la largeur de l'écran entier, à des seuils précis définis à l'avance. Les deux se combinent très bien : flex-wrap gère l'adaptation fine, la media query gère les changements de structure plus importants.
C'est presque toujours parce qu'un élément a une largeur minimale (min-width) qui dépasse l'espace restant sur la ligne courante, même si cet espace paraît suffisant à l'œil. flex-wrap respecte strictement ces contraintes de taille avant de décider si un élément tient encore sur la ligne.