La flex-wrappropriété est une sous-propriété du module Disposition de boîte flexible.
Il définit si les éléments flexibles sont forcés sur une seule ligne ou peuvent être répartis sur plusieurs lignes. S'il est défini sur plusieurs lignes, il définit également l'axe transversal qui détermine la direction dans laquelle les nouvelles lignes sont empilées.
Rappel: l'axe transversal est l'axe perpendiculaire à l'axe principal. Sa direction dépend de la direction de l'axe principal.
La flex-wrappropriété accepte 3 valeurs différentes:
nowrap( par défaut ): ligne unique qui peut entraîner un débordement du conteneurwrap: multi-lignes, la direction est définie parflex-directionwrap-reverse: multi-lignes, opposé à la direction définie parflex-direction
Syntaxe
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Démo
Dans la démo suivante:
- La liste rouge est définie sur
nowrap - La liste jaune est définie sur
wrap - La liste bleue est définie sur
wrap-reverse
Note: l' flex-directionest réglé sur la valeur par défaut: row.
Voir le Pen Flex-wrap: démo de CSS-Tricks (@ css-tricks) sur CodePen.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Pour plus d'informations sur la façon de mélanger les syntaxes afin d'obtenir le meilleur support du navigateur, veuillez vous référer à cet article (CSS-Tricks) ou à cet article (DevOpera).