Wrap Lab
Autorise les cartes à revenir à la ligne avec flex-wrap.
Objectifs de la leçon
- Activer le retour à la ligne
- Conserver un espacement cohérent entre lignes
- Tester avec une largeur réduite
Comprendre le principe
À la fin de cette leçon, tu sauras activer le retour à la ligne.
À la fin de cette leçon, tu sauras conserver un espacement cohérent entre lignes.
À la fin de cette leçon, tu sauras tester avec une largeur réduite.
Groupe adaptable
Les cartes utilisent une nouvelle ligne lorsque l'espace manque.
display: flex crée la ligne.
flex-wrap autorise plusieurs lignes.
Pourquoi éviter : Ligne forcée
Les cartes risquent de rétrécir excessivement ou de déborder.
Un layout flexible prévoit ce qui arrive lorsque l'espace devient insuffisant.
Vocabulaire lié
- flex-wrap — Autorise les éléments flex à passer sur plusieurs lignes.
- nowrap — Valeur par défaut qui conserve une seule ligne.
- ligne flex — Une rangée d'éléments dans un conteneur flex replié.
Validation
- Je peux expliquer : Un layout flexible prévoit ce qui arrive lorsque l'espace devient insuffisant.
- Je peux activer le retour à la ligne.
- Je peux conserver un espacement cohérent entre lignes.