Chapitre 515 | Gestion des retours à la ligne (flex-wrap)

Gestion des retours à la ligne (flex-wrap)

La propriété flex-wrap permet de contrôler si les enfants d’un conteneur Flexbox doivent rester sur une seule ligne ou s’étaler sur plusieurs lignes lorsque l’espace disponible est insuffisant.

Valeurs que nous allons explorer :

1. nowrap (valeur par défaut) : Les enfants restent sur une seule ligne, même s’ils débordent du conteneur.
2. wrap : Les enfants passent à la ligne suivante si l’espace horizontal est insuffisant.
3. wrap-reverse : Comme wrap, mais les lignes sont inversées (la nouvelle ligne apparaît au-dessus de la précédente).

Explication de chaque exemple :

1. nowrap : Les enfants restent alignés sur une seule ligne, même si cela entraîne un débordement du conteneur.
2. wrap : Les enfants se répartissent sur plusieurs lignes lorsque l’espace horizontal est insuffisant.
3. wrap-reverse : Comme wrap, mais les nouvelles lignes apparaissent au-dessus de la précédente.

Expérimentez…

Pour commencer faites varier la taille de width: 100 – 200 – 300 – 500 – 800 – 100%

Revenez à 300px et ajouter à la fin du CSS : (overflow : ce qui dépasse est-il caché ou pas caché ?)

/* à la fin du CSS pour bénéficier de la cascade */

.flex-container {
overflow:hidden;
}

Puis revenez à UNSET

/* à la fin du CSS pour bénéficier de la cascade */

.flex-container {
overflow:unset;
}

Puis faites des tests selon vos envies de découverte sur le code CSS.