flex-wrap |
Enveloppe flexible |
CSS3 |
|
Syntaxe
flex-wrap: inherit|initial|nowrap|wrap|wrap-reverse;
|
Paramètres
Paramètre |
Description |
inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
nowrap |
Ce paramètre permet d'indiquer que les items flexibles ne doivent pas enveloppé. C'est la valeur par défaut. |
wrap |
Ce paramètre permet d'indiquer que les items flexibles doivent être enveloppé si nécessaire. |
wrap-reverse |
Ce paramètre permet d'indiquer que les items flexibles doivent être enveloppé, si nécessaire, dans l'ordre inversé. |
Description
Cette propriété permet d'indiquer si les éléments flexibles doivent envelopper ou non.
Remarques
- Définition et rôle : La propriété flex-wrap détermine si les éléments d'un conteneur flex doivent être disposés sur une seule ligne (par défaut)
ou s'ils peuvent être répartis sur plusieurs lignes lorsque l'espace est insuffisant. Elle accepte trois valeurs : nowrap (valeur par défaut), wrap, et
wrap-reverse.
- Valeur par défaut (nowrap) : Par défaut, la valeur de flex-wrap est nowrap, ce qui signifie que les éléments flexibles sont disposés sur une seule
ligne, et si l'espace n'est pas suffisant, ils vont déborder ou être comprimés. Cette valeur est idéale pour des mises en page compactes où l'on ne souhaite pas que les
éléments se déplacent vers de nouvelles lignes.
- Répartition sur plusieurs lignes (wrap) : La valeur wrap permet aux éléments de se répartir sur plusieurs lignes si l'espace est insuffisant sur la ligne
actuelle. Cela est utile pour créer des mises en page responsives, où les éléments peuvent s'ajuster en fonction de la taille du conteneur, sans que leur contenu ne soit masqué
ou déformé.
- Ordre des lignes avec wrap-reverse : Lorsque la valeur flex-wrap est définie sur wrap-reverse, les éléments sont également répartis sur plusieurs
lignes, mais dans un ordre inversé. Les nouvelles lignes seront placées en haut du conteneur (plutôt qu'en bas avec wrap). Cela peut être utilisé pour des effets de mise
en page particuliers ou pour répondre à certaines conventions visuelles.
- Comportement avec flex-basis : La valeur de flex-basis joue un rôle important lorsque flex-wrap est activé. Elle détermine la taille initiale des
éléments avant qu'ils ne se répartissent sur plusieurs lignes. En ajustant flex-basis, vous pouvez contrôler l'espace qu'un élément occupe avant qu'il ne passe à la ligne
suivante.
- Utilisation dans les mises en page réactives : flex-wrap est particulièrement utile dans des mises en page réactives, où la taille du conteneur change en
fonction de la largeur de l'écran. En permettant aux éléments de se déplacer sur plusieurs lignes, cette propriété aide à maintenir une disposition claire et bien structurée, même
sur des écrans de tailles différentes.
- Interaction avec align-content : Lorsque flex-wrap est activé et que les éléments sont répartis sur plusieurs lignes, la propriété align-content entre
en jeu. Elle permet de contrôler l'alignement des lignes à l'intérieur du conteneur, offrant plus de flexibilité dans l'organisation des éléments sur plusieurs lignes.
- Limites d'utilisation avec flex-wrap : Bien que flex-wrap permette une répartition plus fluide des éléments, il peut parfois compliquer le contrôle exact
de l'alignement et de la taille des éléments dans un conteneur. Dans certains cas, un alignement plus précis ou une gestion plus stricte de l'espace peut nécessiter d'autres
propriétés flexibles ou des ajustements supplémentaires via des media queries pour un contrôle optimal.
Dernière mise à jour : Dimanche, le 20 décembre 2015