Axe vertical ou horizontal ?

1section {
2  display: flex;
3  flex-direction: row | row-reverse | column | column-reverse;
4}

L'exemple ci-dessus illustre la possibilité de définir la direction dans laquelle les éléments sont disposés dans un conteneur flex. Pour le modèle Flexbox, il existe quatre options principales de disposition :

• row (par défaut) - les éléments sont disposés sur une ligne horizontale, de gauche à droite.
• row-reverse - les éléments sont disposés sur une ligne horizontale, de droite à gauche.
• column - les éléments sont disposés sur une ligne verticale, de haut en bas.
• column-reverse - les éléments sont disposés sur une ligne verticale, de bas en haut.

Grâce à ces options, on peut contrôler la direction du placement des éléments à l'intérieur du conteneur Flexbox, ce qui permet d'adapter la mise en page de façon flexible à nos besoins.

Exercice : Disposition avec le modèle Flexbox

Dans cet exercice, tu apprendras à utiliser la propriété flex-direction du modèle Flexbox pour contrôler la direction du placement des éléments dans un conteneur flex. Ta mission sera de créer une page web avec des sections disposées dans différentes directions à l'aide de la propriété flex-direction.

É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>Disposition avec le modèle Flexbox</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Élément 1</div>
27    <div>Élément 2</div>
28    <div>Élément 3</div>
29  </section>
30</body>
31</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-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19section div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Étape 4 : Disposition horizontale (row)

Ajoute un style pour la classe .flex-row afin de disposer les éléments sur une ligne horizontale, de gauche à droite.

1/* Disposition horizontale (row) */
2.flex-row {
3  flex-direction: row;
4}

Étape 5 : Disposition horizontale inversée (row-reverse)

Ajoute un style pour la classe .flex-row-reverse afin de disposer les éléments sur une ligne horizontale, de droite à gauche.

1/* Disposition horizontale inversée (row-reverse) */
2.flex-row-reverse {
3  flex-direction: row-reverse;
4}

Étape 6 : Disposition verticale (column)

Ajoute un style pour la classe .flex-column afin de disposer les éléments sur une ligne verticale, de haut en bas.

1/* Disposition verticale (column) */
2.flex-column {
3  flex-direction: column;
4}

Étape 7 : Disposition verticale inversée (column-reverse)

Ajoute un style pour la classe .flex-column-reverse afin de disposer les éléments sur une ligne verticale, de bas en haut.

1/* Disposition verticale inversée (column-reverse) */
2.flex-column-reverse {
3  flex-direction: column-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>Disposition avec le modèle Flexbox</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Élément 1</div>
27    <div>Élément 2</div>
28    <div>Élément 3</div>
29  </section>
30</body>
31</html>

Fichier CSS (styles.css)

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19section div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Disposition horizontale (row) */
28.flex-row {
29  flex-direction: row;
30}
31
32/* Disposition horizontale inversée (row-reverse) */
33.flex-row-reverse {
34  flex-direction: row-reverse;
35}
36
37/* Disposition verticale (column) */
38.flex-column {
39  flex-direction: column;
40}
41
42/* Disposition verticale inversée (column-reverse) */
43.flex-column-reverse {
44  flex-direction: column-reverse;
45}

Pour aller plus loin

1. Ajoute d'autres sections avec différentes dispositions pour mieux comprendre comment fonctionnent les différentes options de flex-direction.
2. Essaie d'ajouter davantage de styles à ta page, comme changer les couleurs, les tailles et d'autres propriétés CSS.
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-direction du modèle Flexbox pour contrôler la direction du placement des éléments dans un conteneur flex.

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 - Mises en page flexibles</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flexbox - Guide des mises en page flexibles</h1>
12
13        <section class="demo-section">
14            <h2>Flex Direction - Row (par défaut)</h2>
15            <div class="flex-container flex-row">
16                <div class="flex-item">Élément 1</div>
17                <div class="flex-item">Élément 2</div>
18                <div class="flex-item">Élément 3</div>
19            </div>
20        </section>
21
22        <section class="demo-section">
23            <h2>Flex Direction - Row Reverse</h2>
24            <div class="flex-container flex-row-reverse">
25                <div class="flex-item">Élément 1</div>
26                <div class="flex-item">Élément 2</div>
27                <div class="flex-item">Élément 3</div>
28            </div>
29        </section>
30
31        <section class="demo-section">
32            <h2>Flex Direction - Column</h2>
33            <div class="flex-container flex-column">
34                <div class="flex-item">Élément 1</div>
35                <div class="flex-item">Élément 2</div>
36                <div class="flex-item">Élément 3</div>
37            </div>
38        </section>
39
40        <section class="demo-section">
41            <h2>Justify Content - Space Between</h2>
42            <div class="flex-container justify-space-between">
43                <div class="flex-item">Début</div>
44                <div class="flex-item">Milieu</div>
45                <div class="flex-item">Fin</div>
46            </div>
47        </section>
48
49        <section class="demo-section">
50            <h2>Justify Content - Center</h2>
51            <div class="flex-container justify-center">
52                <div class="flex-item">Centre</div>
53                <div class="flex-item">Page</div>
54            </div>
55        </section>
56
57        <section class="demo-section">
58            <h2>Align Items - Center</h2>
59            <div class="flex-container align-center">
60                <div class="flex-item">Hauteur 1</div>
61                <div class="flex-item tall">Hauteur 2<br>Deuxième ligne</div>
62                <div class="flex-item">Hauteur 3</div>
63            </div>
64        </section>
65
66        <section class="demo-section">
67            <h2>Flex Grow et Shrink</h2>
68            <div class="flex-container">
69                <div class="flex-item flex-grow-1">Flex-grow: 1</div>
70                <div class="flex-item flex-grow-2">Flex-grow: 2</div>
71                <div class="flex-item">Par défaut</div>
72            </div>
73        </section>
74
75        <section class="demo-section">
76            <h2>Flex Wrap</h2>
77            <div class="flex-container flex-wrap">
78                <div class="flex-item wide">Large 1</div>
79                <div class="flex-item wide">Large 2</div>
80                <div class="flex-item wide">Large 3</div>
81                <div class="flex-item wide">Large 4</div>
82                <div class="flex-item wide">Large 5</div>
83            </div>
84        </section>
85
86        <section class="demo-section">
87            <h2>Exemple pratique - Barre de navigation</h2>
88            <nav class="navbar">
89                <div class="nav-brand">Logo</div>
90                <div class="nav-links">
91                    <a href="#">Accueil</a>
92                    <a href="#">À propos</a>
93                    <a href="#">Services</a>
94                    <a href="#">Contact</a>
95                </div>
96                <div class="nav-auth">
97                    <button>Connexion</button>
98                </div>
99            </nav>
100        </section>
101
102        <section class="demo-section">
103            <h2>Exemple pratique - Disposition en cartes</h2>
104            <div class="card-container">
105                <div class="card">
106                    <div class="card-header">Carte 1</div>
107                    <div class="card-body">Contenu de la première carte avec une mise en page flexible.</div>
108                    <div class="card-footer">
109                        <button>Action</button>
110                    </div>
111                </div>
112                <div class="card">
113                    <div class="card-header">Carte 2</div>
114                    <div class="card-body">Deuxième carte avec un contenu plus long, montrant comment flexbox ajuste automatiquement la hauteur des éléments.</div>
115                    <div class="card-footer">
116                        <button>Action</button>
117                    </div>
118                </div>
119                <div class="card">
120                    <div class="card-header">Carte 3</div>
121                    <div class="card-body">Troisième carte.</div>
122                    <div class="card-footer">
123                        <button>Action</button>
124                    </div>
125                </div>
126            </div>
127        </section>
128    </div>
129</body>
130</html>