Aligner les éléments sur l'axe horizontal

1section {
2  display: flex;
3  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
4}

• La propriété « flex-start » (par défaut) - les éléments sont répartis vers le début.
• La propriété « flex-end » - les éléments sont répartis vers la fin.
• La propriété « start » - les éléments sont répartis vers le début selon le writing-mode.
• La propriété « end » - les éléments sont répartis vers la fin selon le writing-mode.
• La propriété « left » - les éléments sont répartis vers le bord gauche du conteneur, sauf si flex-direction ne s'applique pas, auquel cas elle se comporte comme « start ».
• La propriété « right » - les éléments sont répartis vers le bord droit du conteneur, sauf si flex-direction ne s'applique pas, auquel cas elle se comporte comme « end ».
• La propriété « center » - les éléments sont centrés sur la ligne.
• La propriété « space-between » - les éléments sont répartis de façon homogène sur la ligne ; le premier élément est au bord de départ et le dernier au bord de fin.
• La propriété « space-around » - les éléments sont répartis de façon homogène sur la ligne avec un espace égal autour d'eux. Remarque que les espaces de chaque côté sont plus grands que les espaces entre les éléments.
• La propriété « space-evenly » - les éléments sont répartis de façon homogène sur la ligne, de sorte que l'espacement entre deux éléments quelconques (et l'espacement par rapport aux bords) soit égal.

Grâce à ces propriétés, on peut contrôler avec précision la répartition des éléments dans un conteneur Flexbox, garantissant une disposition harmonieuse et esthétique sur une page web.

Exercice : Aligner les éléments sur l'axe horizontal

Dans cet exercice, tu apprendras à utiliser la propriété justify-content du modèle Flexbox pour contrôler avec précision la répartition des éléments sur l'axe horizontal. Ta mission sera de créer une page web avec des sections réparties selon différentes dispositions à l'aide de la propriété justify-content.

É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>Aligner les éléments sur l'axe horizontal</title>
8</head>
9<body>
10  <section class="flex-start">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="flex-end">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="center">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25  <section class="space-between">
26    <div>Élément 1</div>
27    <div>Élément 2</div>
28    <div>Élément 3</div>
29  </section>
30  <section class="space-around">
31    <div>Élément 1</div>
32    <div>Élément 2</div>
33    <div>Élément 3</div>
34  </section>
35  <section class="space-evenly">
36    <div>Élément 1</div>
37    <div>Élément 2</div>
38    <div>Élément 3</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
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 100px;
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 avec justify-content: flex-start

Ajoute un style pour la classe .flex-start afin de positionner les éléments vers le début.

1/* Disposition avec justify-content: flex-start */
2.flex-start {
3  justify-content: flex-start;
4}

Étape 5 : Disposition avec justify-content: flex-end

Ajoute un style pour la classe .flex-end afin de positionner les éléments vers la fin.

1/* Disposition avec justify-content: flex-end */
2.flex-end {
3  justify-content: flex-end;
4}

Étape 6 : Disposition avec justify-content: center

Ajoute un style pour la classe .center afin de centrer les éléments.

1/* Disposition avec justify-content: center */
2.center {
3  justify-content: center;
4}

Étape 7 : Disposition avec justify-content: space-between

Ajoute un style pour la classe .space-between afin de répartir les éléments de façon homogène sur la ligne, avec le premier élément au bord de départ et le dernier au bord de fin.

1/* Disposition avec justify-content: space-between */
2.space-between {
3  justify-content: space-between;
4}

Étape 8 : Disposition avec justify-content: space-around

Ajoute un style pour la classe .space-around afin de répartir les éléments de façon homogène sur la ligne avec un espace égal autour d'eux.

1/* Disposition avec justify-content: space-around */
2.space-around {
3  justify-content: space-around;
4}

Étape 9 : Disposition avec justify-content: space-evenly

Ajoute un style pour la classe .space-evenly afin de répartir les éléments de façon homogène sur la ligne, de sorte que l'espacement entre deux éléments quelconques (et l'espacement par rapport aux bords) soit égal.

1/* Disposition avec justify-content: space-evenly */
2.space-evenly {
3  justify-content: space-evenly;
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>Aligner les éléments sur l'axe horizontal</title>
8</head>
9<body>
10  <section class="flex-start">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="flex-end">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="center">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25  <section class="space-between">
26    <div>Élément 1</div>
27    <div>Élément 2</div>
28    <div>Élément 3</div>
29  </section>
30  <section class="space-around">
31    <div>Élément 1</div>
32    <div>Élément 2</div>
33    <div>Élément 3</div>
34  </section>
35  <section class="space-evenly">
36    <div>Élément 1</div>
37    <div>Élément 2</div>
38    <div>Élément 3</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
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 100px;
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 avec justify-content: flex-start */
28.flex-start {
29  justify-content: flex-start;
30}
31
32/* Disposition avec justify-content: flex-end */
33.flex-end {
34  justify-content: flex-end;
35}
36
37/* Disposition avec justify-content: center */
38.center {
39  justify-content: center;
40}
41
42/* Disposition avec justify-content: space-between */
43.space-between {
44  justify-content: space-between;
45}
46
47/* Disposition avec justify-content: space-around */
48.space-around {
49  justify-content: space-around;
50}
51
52/* Disposition avec justify-content: space-evenly */
53.space-evenly {
54  justify-content: space-evenly;
55}

Pour aller plus loin

1. Ajoute d'autres sections avec différentes valeurs de justify-content 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 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é justify-content du modèle Flexbox pour contrôler avec précision la répartition des éléments sur l'axe horizontal.

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>CSS Transform et Transition</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>CSS Transform & Transition</h1>
12
13        <section class="demo-section">
14            <h2>Transform - Translate (Déplacement)</h2>
15            <div class="transform-demo">
16                <div class="box translate">Survole - Translate</div>
17                <div class="box translate-3d">Survole - Translate 3D</div>
18            </div>
19        </section>
20
21        <section class="demo-section">
22            <h2>Transform - Scale (Mise à l'échelle)</h2>
23            <div class="transform-demo">
24                <div class="box scale">Survole - Scale</div>
25                <div class="box scale-axis">Survole - Scale X/Y</div>
26            </div>
27        </section>
28
29        <section class="demo-section">
30            <h2>Transform - Rotate (Rotation)</h2>
31            <div class="transform-demo">
32                <div class="box rotate">Survole - Rotate</div>
33                <div class="box rotate-3d">Survole - Rotate 3D</div>
34            </div>
35        </section>
36
37        <section class="demo-section">
38            <h2>Transform - Skew (Inclinaison)</h2>
39            <div class="transform-demo">
40                <div class="box skew">Survole - Skew</div>
41                <div class="box skew-axis">Survole - Skew X/Y</div>
42            </div>
43        </section>
44
45        <section class="demo-section">
46            <h2>Transformations combinées</h2>
47            <div class="transform-demo">
48                <div class="box combined">Survole - Combinaison</div>
49                <div class="box flip-card">
50                    <div class="flip-inner">
51                        <div class="flip-front">Recto</div>
52                        <div class="flip-back">Verso</div>
53                    </div>
54                </div>
55            </div>
56        </section>
57
58        <section class="demo-section">
59            <h2>Transition - Différentes fonctions de timing</h2>
60            <div class="transition-demo">
61                <div class="box transition-linear">Linear</div>
62                <div class="box transition-ease">Ease</div>
63                <div class="box transition-bounce">Cubic-bezier</div>
64            </div>
65        </section>
66
67        <section class="demo-section">
68            <h2>Transition - Différentes propriétés</h2>
69            <div class="transition-demo">
70                <div class="box transition-color">Couleur</div>
71                <div class="box transition-size">Taille</div>
72                <div class="box transition-multiple">Plusieurs propriétés</div>
73            </div>
74        </section>
75
76        <section class="demo-section">
77            <h2>Exemples pratiques</h2>
78
79            <div class="practical-examples">
80                <div class="button-effects">
81                    <h3>Boutons avec effets</h3>
82                    <button class="btn btn-hover">Hover Effect</button>
83                    <button class="btn btn-press">Press Effect</button>
84                    <button class="btn btn-slide">Slide Effect</button>
85                </div>
86
87                <div class="card-effects">
88                    <h3>Cartes avec animations</h3>
89                    <div class="card-grid">
90                        <div class="animated-card lift">
91                            <h4>Lift Effect</h4>
92                            <p>Survole avec la souris</p>
93                        </div>
94                        <div class="animated-card tilt">
95                            <h4>Tilt Effect</h4>
96                            <p>Survole avec la souris</p>
97                        </div>
98                        <div class="animated-card zoom">
99                            <h4>Zoom Effect</h4>
100                            <p>Survole avec la souris</p>
101                        </div>
102                    </div>
103                </div>
104
105                <div class="loading-spinner">
106                    <h3>Loading Spinner</h3>
107                    <div class="spinner"></div>
108                </div>
109            </div>
110        </section>
111    </div>
112</body>
113</html>