flex-wrap
Permet aux éléments flex de passer à la ligne suivante quand la place manque.
- Valeur initiale
nowrap- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs flex
- JavaScript
element.style.flexWrap = "wrap"
Exemple
#.tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}<div class="tags stage">
<span class="box">HTML</span><span class="box">CSS</span><span class="box">JavaScript</span>
<span class="box">TypeScript</span><span class="box">React</span><span class="box">Python</span>
</div>Définition et utilisation
#Par défaut, le conteneur flex comprime tous les éléments sur une seule ligne, même s’ils deviennent très étroits. La propriété flex-wrap avec la valeur wrap leur permet de passer à la ligne suivante.
Le retour à la ligne est la base des listes de cartes, d’étiquettes et de boutons responsives : sur un grand écran, elles tiennent sur une seule rangée, sur un écran étroit, elles s’étalent sur plusieurs.
C’est seulement avec plusieurs lignes que align-content entre en jeu : elle répartit les lignes entières les unes par rapport aux autres.
Syntaxe
#flex-wrap: nowrap | wrap | wrap-reverse;Valeurs
#- Tous les éléments sur une seule ligne. Ils rétrécissent ou débordent du conteneur.
- Les éléments qui ne tiennent pas passent à la ligne suivante.
- Retour à la ligne vers le haut : les nouvelles lignes apparaissent au-dessus des précédentes.
Valeurs en pratique
#nowrap
.demo { flex-wrap: nowrap; }wrap
.demo { flex-wrap: wrap; }wrap-reverse
.demo { flex-wrap: wrap-reverse; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour les listes qui reviennent à la ligne, utilisez
gapplutôt que des marges. Les espaces resteront égaux, aussi entre les lignes. - Si vous voulez des colonnes égales quel que soit le nombre d’éléments, Grid avec
repeat(auto-fill, minmax(…))fera mieux l’affaire.
Entrées associées
#- flex-directionDéfinit le sens de l’axe principal : les éléments flex s’alignent en ligne ou en colonne.
- flex-flowRaccourci qui réunit flex-direction et flex-wrap en une seule déclaration.
- align-contentRépartit des lignes entières d’éléments sur l’axe secondaire du conteneur.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.