flex-wrap et align-content¶
Note
Toutes les propriétés présentées ici s’appliquent aux conteneurs flexbox, mais pas aux items flexbox.
flex-wrap¶
La propriété flex-wrap permet, lorsque la place à l’horizontal vient à manquer, de placer les contenus à la ligne plutôt que de forcer leur largeur pour les faire rentrer.
© css-tricks.com
selecteur-conteneur {
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
Voir aussi
exercice¶
Poursuivez le travail du précédent exercice en associant :
- aux éléments de classe contenu une déclaration associant la propriété « width » et la valeur « 50% »
- à l’élément de classe contenant une déclaration associant la propriété « flex-wrap » et la valeur « wrap »
Note
Observez que les éléments ne font, avant d’appliquer la propriété flex-wrap, pas 50% de la taille du conteneur en largeur, mais se partagent l’espace. L’application de la propriété flex-wrap change cela et permet de distribuer le contenu sur plusieurs lignes.
align-content¶
Lorsque la propriété flex-wrap est utilisée pour permettre de distribuer le contenu sur plusieurs lignes, il ne fait plus sens d’utiliser align-items qui concerne une répartition en une ligne.
align-content va permettre de définir la distribution des différentes lignes le long de l’axe secondaire en cas d’espace disponible : début de l’axe, fin de l’axe, centré, distribué…
© css-tricks.com
selecteur-conteneur {
align-content: center; /* Les éléments sont groupés au centre */
align-content: start; /* Les éléments sont groupés au début */
align-content: end; /* Les éléments sont groupés à la fin */
align-content: flex-start; /* Les éléments flexibles sont groupés au début */
align-content: flex-end; /* Les éléments flexibles sont groupés à la fin */
}
Voir aussi
exercice¶
Poursuivez le travail du précédent exercice en appliquant la propriété align-content sur l’élément avec la classe conteneur, et en testant les différentes valeurs possibles.