Le retour à la ligne des éléments - flex-wrap

Imagine une procession de prêtres dans un ancien temple égyptien. Si le couloir est assez large, tous les prêtres marchent sur une seule rangée. Mais lorsque le couloir se rétrécit, certains d'entre eux doivent passer à la rangée suivante. C'est exactement ainsi que fonctionne la propriété flex-wrap dans CSS Flexbox !

Par défaut, tous les éléments dont le parent porte la déclaration display: flex; essaieront de tenir sur une seule ligne. Tu peux changer cela et permettre aux éléments de passer aux lignes suivantes.

1section {
2  display: flex;
3  flex-wrap: nowrap | wrap | wrap-reverse;
4}

Dans le modèle Flexbox, nous avons aussi la possibilité de contrôler le comportement de retour à la ligne des éléments lorsqu'ils ne tiennent pas sur une seule rangée. Voici trois options de retour à la ligne :

• L'option « nowrap » (par défaut) - tous les éléments restent sur une seule rangée sans retour à la ligne. Les éléments essaient de tenir dans l'espace disponible sans créer de nouvelles lignes.

• L'option « wrap » - les éléments passent à de nouvelles lignes, de haut en bas. Lorsque les éléments ne tiennent pas sur la rangée actuelle, ils sont déplacés vers la ligne suivante, créant une disposition sur plusieurs lignes.

• L'option « wrap-reverse » - les éléments passent à de nouvelles lignes, mais en ordre inverse, de bas en haut. Les éléments qui ne tiennent pas sur la ligne actuelle sont déplacés vers la ligne précédente.

Grâce à ces options, on peut contrôler de façon flexible la disposition des éléments dans un conteneur Flexbox, en tenant compte de leur retour à la ligne, ce qui permet d'adapter correctement la mise en page à l'espace disponible.

Exercice : Le retour à la ligne des éléments

Dans cet exercice, tu apprendras à utiliser la propriété flex-wrap du modèle Flexbox pour contrôler le retour à la ligne des éléments lorsqu'ils ne tiennent pas sur une seule rangée. Ta mission sera de créer une page web avec des conteneurs disposés selon différentes mises en page à l'aide de cette propriété.

Étape 1 : Crée la structure de base d'un document HTML

D'abord, crée un nouveau fichier HTML et ajoute une structure de base de document HTML. Ajoute un élément <section> avec plusieurs éléments <div> dans le corps du document (<body>).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lien vers le fichier CSS -->
7  <title>Le retour à la ligne des éléments</title>
8</head>
9<body>
10  <section class="container nowrap">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14    <div>Élément 4</div>
15    <div>Élément 5</div>
16    <div>Élément 6</div>
17    <div>Élément 7</div>
18    <div>Élément 8</div>
19  </section>
20  <section class="container wrap">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24    <div>Élément 4</div>
25    <div>Élément 5</div>
26    <div>Élément 6</div>
27    <div>Élément 7</div>
28    <div>Élément 8</div>
29  </section>
30  <section class="container wrap-reverse">
31    <div>Élément 1</div>
32    <div>Élément 2</div>
33    <div>Élément 3</div>
34    <div>Élément 4</div>
35    <div>Élément 5</div>
36    <div>Élément 6</div>
37    <div>Élément 7</div>
38    <div>Élément 8</div>
39  </section>
40</body>
41</html>

Étape 2 : Crée un fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css.

Étape 3 : Mise en forme de base

Ajoute des styles de base pour les éléments <section> et <div> afin qu'ils soient visibles sur la page.

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17  flex-wrap: nowrap; /* Valeur par défaut */
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}

Étape 4 : Disposition avec flex-wrap: nowrap

Ajoute un style pour la classe .nowrap afin de garder les éléments sur une seule rangée sans retour à la ligne.

1/* Disposition avec flex-wrap: nowrap */
2.nowrap {
3  flex-wrap: nowrap;
4}

Étape 5 : Disposition avec flex-wrap: wrap

Ajoute un style pour la classe .wrap afin de faire passer les éléments à de nouvelles lignes lorsqu'ils ne tiennent pas sur une seule rangée.

1/* Disposition avec flex-wrap: wrap */
2.wrap {
3  flex-wrap: wrap;
4}

Étape 6 : Disposition avec flex-wrap: wrap-reverse

Ajoute un style pour la classe .wrap-reverse afin de faire passer les éléments à de nouvelles lignes en ordre inverse, de bas en haut.

1/* Disposition avec flex-wrap: wrap-reverse */
2.wrap-reverse {
3  flex-wrap: wrap-reverse;
4}

Résultat

Une fois toutes les étapes terminées, tes fichiers HTML et CSS devraient ressembler à ceci :

Fichier HTML (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lien vers le fichier CSS -->
7  <title>Le retour à la ligne des éléments</title>
8</head>
9<body>
10  <section class="container nowrap">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14    <div>Élément 4</div>
15    <div>Élément 5</div>
16    <div>Élément 6</div>
17    <div>Élément 7</div>
18    <div>Élément 8</div>
19  </section>
20  <section class="container wrap">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24    <div>Élément 4</div>
25    <div>Élément 5</div>
26    <div>Élément 6</div>
27    <div>Élément 7</div>
28    <div>Élément 8</div>
29  </section>
30  <section class="container wrap-reverse">
31    <div>Élément 1</div>
32    <div>Élément 2</div>
33    <div>Élément 3</div>
34    <div>Élément 4</div>
35    <div>Élément 5</div>
36    <div>Élément 6</div>
37    <div>Élément 7</div>
38    <div>Élément 8</div>
39  </section>
40</body>
41</html>

Fichier CSS (styles.css)

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17  flex-wrap: nowrap; /* Valeur par défaut */
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}
27
28/* Disposition avec flex-wrap: nowrap */
29.nowrap {
30  flex-wrap: nowrap;
31}
32
33/* Disposition avec flex-wrap: wrap */
34.wrap {
35  flex-wrap: wrap;
36}
37
38/* Disposition avec flex-wrap: wrap-reverse */
39.wrap-reverse {
40  flex-wrap: wrap-reverse;
41}

Tâche supplémentaire

1. Ajoute d'autres sections avec différentes valeurs de flex-wrap pour mieux comprendre comment fonctionnent les différentes options.
2. Essaie d'ajouter davantage de styles à ta page, comme changer les couleurs, les tailles et d'autres propriétés des éléments afin de mieux comprendre comment fonctionnent les différentes options.
3. Mets tes compétences à l'épreuve en créant des mises en page plus complexes avec différentes combinaisons de propriétés Flexbox.

Après cet exercice, tu devrais mieux comprendre comment utiliser la propriété flex-wrap du modèle Flexbox pour contrôler le retour à la ligne des éléments lorsqu'ils ne tiennent pas sur une seule rangée.

N'oublie pas : flex-wrap c'est comme planifier une procession dans un temple égyptien : tu décides si les participants doivent s'entasser sur une seule rangée ou s'ils peuvent élégamment passer aux suivantes !

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox - Flex Wrap</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flex Wrap - Retour à la ligne des éléments</h1>
12        <p class="subtitle">Contrôle si les éléments doivent passer à une nouvelle ligne</p>
13
14        <section class="demo-section">
15            <h2>flex-wrap: nowrap (par défaut)</h2>
16            <div class="flex-container wrap-nowrap">
17                <div class="flex-item">1</div>
18                <div class="flex-item">2</div>
19                <div class="flex-item">3</div>
20                <div class="flex-item">4</div>
21                <div class="flex-item">5</div>
22                <div class="flex-item">6</div>
23                <div class="flex-item">7</div>
24            </div>
25            <p class="description">Tous les éléments sur une seule ligne - ils peuvent rétrécir</p>
26        </section>
27
28        <section class="demo-section">
29            <h2>flex-wrap: wrap</h2>
30            <div class="flex-container wrap-wrap">
31                <div class="flex-item">1</div>
32                <div class="flex-item">2</div>
33                <div class="flex-item">3</div>
34                <div class="flex-item">4</div>
35                <div class="flex-item">5</div>
36                <div class="flex-item">6</div>
37                <div class="flex-item">7</div>
38            </div>
39            <p class="description">Les éléments passent à la ligne suivante quand l'espace manque</p>
40        </section>
41
42        <section class="demo-section">
43            <h2>flex-wrap: wrap-reverse</h2>
44            <div class="flex-container wrap-reverse">
45                <div class="flex-item">1</div>
46                <div class="flex-item">2</div>
47                <div class="flex-item">3</div>
48                <div class="flex-item">4</div>
49                <div class="flex-item">5</div>
50                <div class="flex-item">6</div>
51                <div class="flex-item">7</div>
52            </div>
53            <p class="description">Les éléments passent à la ligne dans l'ordre inverse</p>
54        </section>
55
56        <section class="demo-section practice">
57            <h2>Exercice : galerie de trésors égyptiens</h2>
58            <p class="practice-description">Les trésors du pharaon dans une galerie responsive</p>
59
60            <div class="gallery">
61                <div class="treasure-item">◆</div>
62                <div class="treasure-item">◆</div>
63                <div class="treasure-item">◆</div>
64                <div class="treasure-item">◆</div>
65                <div class="treasure-item">◆</div>
66                <div class="treasure-item">◆</div>
67                <div class="treasure-item">◆</div>
68                <div class="treasure-item">◆</div>
69                <div class="treasure-item">◆</div>
70                <div class="treasure-item">◆</div>
71            </div>
72
73            <div class="gallery-info">
74                <p>Change la largeur de la fenêtre pour voir comment la galerie s'adapte !</p>
75            </div>
76        </section>
77    </div>
78</body>
79</html>