Aligner les éléments sur l'axe vertical

1section {
2  display: flex;
3  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
4}

• La propriété « stretch » (par défaut) - étire les éléments pour remplir le conteneur, tout en respectant les contraintes éventuelles de min-width/max-width.
• La propriété « flex-start » / « start » / « self-start » - les éléments sont placés au début de l'axe secondaire. La différence entre elles est subtile et dépend des règles de flex-direction ou de writing-mode.
• La propriété « flex-end » / « end » / « self-end » - les éléments sont placés à la fin de l'axe secondaire. La différence dépend également des règles de flex-direction ou de writing-mode.
• La propriété « center » - les éléments sont centrés sur l'axe secondaire.
• La propriété « baseline » - les éléments sont alignés, par exemple, sur leurs lignes de base.

Grâce à ces propriétés, on peut contrôler avec précision la position et l'alignement des éléments dans un conteneur Flexbox, ce qui nous permet de créer des mises en page esthétiques et bien ajustées sur une page web.

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

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

É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 vertical</title>
8</head>
9<body>
10  <section class="stretch">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="flex-start">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="flex-end">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25  <section class="center">
26    <div>Élément 1</div>
27    <div>Élément 2</div>
28    <div>Élément 3</div>
29  </section>
30  <section class="baseline">
31    <div>Élément 1</div>
32    <div>Élément 2</div>
33    <div>Élément 3</div>
34  </section>
35</body>
36</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: 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 avec align-items: stretch

Ajoute un style pour la classe .stretch afin d'étirer les éléments pour remplir le conteneur.

1/* Disposition avec align-items: stretch */
2.stretch {
3  align-items: stretch;
4}

Étape 5 : Disposition avec align-items: flex-start

Ajoute un style pour la classe .flex-start afin de placer les éléments au début de l'axe secondaire.

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

Étape 6 : Disposition avec align-items: flex-end

Ajoute un style pour la classe .flex-end afin de placer les éléments à la fin de l'axe secondaire.

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

Étape 7 : Disposition avec align-items: center

Ajoute un style pour la classe .center afin de centrer les éléments sur l'axe secondaire.

1/* Disposition avec align-items: center */
2.center {
3  align-items: center;
4}

Étape 8 : Disposition avec align-items: baseline

Ajoute un style pour la classe .baseline afin d'aligner les éléments sur leurs lignes de base.

1/* Disposition avec align-items: baseline */
2.baseline {
3  align-items: baseline;
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 vertical</title>
8</head>
9<body>
10  <section class="stretch">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="flex-start">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="flex-end">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25  <section class="center">
26    <div>Élément 1</div>
27    <div>Élément 2</div>
28    <div>Élément 3</div>
29  </section>
30  <section class="baseline">
31    <div>Élément 1</div>
32    <div>Élément 2</div>
33    <div>Élément 3</div>
34  </section>
35</body>
36</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: 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 avec align-items: stretch */
28.stretch {
29  align-items: stretch;
30}
31
32/* Disposition avec align-items: flex-start */
33.flex-start {
34  align-items: flex-start;
35}
36
37/* Disposition avec align-items: flex-end */
38.flex-end {
39  align-items: flex-end;
40}
41
42/* Disposition avec align-items: center */
43.center {
44  align-items: center;
45}
46
47/* Disposition avec align-items: baseline */
48.baseline {
49  align-items: baseline;
50}

Pour aller plus loin

1. Ajoute d'autres sections avec différentes valeurs de align-items 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é align-items du modèle Flexbox pour contrôler avec précision la position et l'alignement des éléments sur l'axe vertical.

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 - Justify Content</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Justify Content - Répartition sur l'axe principal</h1>
12        <p class="subtitle">Contrôle la répartition des éléments le long de l'axe principal d'un conteneur flex</p>
13
14        <section class="demo-section">
15            <h2>justify-content: flex-start (par défaut)</h2>
16            <div class="flex-container justify-start">
17                <div class="flex-item">1</div>
18                <div class="flex-item">2</div>
19                <div class="flex-item">3</div>
20            </div>
21            <p class="description">Les éléments sont alignés au début du conteneur</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>justify-content: flex-end</h2>
26            <div class="flex-container justify-end">
27                <div class="flex-item">1</div>
28                <div class="flex-item">2</div>
29                <div class="flex-item">3</div>
30            </div>
31            <p class="description">Les éléments sont alignés à la fin du conteneur</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>justify-content: center</h2>
36            <div class="flex-container justify-center">
37                <div class="flex-item">1</div>
38                <div class="flex-item">2</div>
39                <div class="flex-item">3</div>
40            </div>
41            <p class="description">Les éléments sont centrés dans le conteneur</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>justify-content: space-between</h2>
46            <div class="flex-container justify-between">
47                <div class="flex-item">1</div>
48                <div class="flex-item">2</div>
49                <div class="flex-item">3</div>
50            </div>
51            <p class="description">Premier élément au début, dernier à la fin, espacement égal entre les deux</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>justify-content: space-around</h2>
56            <div class="flex-container justify-around">
57                <div class="flex-item">1</div>
58                <div class="flex-item">2</div>
59                <div class="flex-item">3</div>
60            </div>
61            <p class="description">Espacement égal autour de chaque élément</p>
62        </section>
63
64        <section class="demo-section">
65            <h2>justify-content: space-evenly</h2>
66            <div class="flex-container justify-evenly">
67                <div class="flex-item">1</div>
68                <div class="flex-item">2</div>
69                <div class="flex-item">3</div>
70            </div>
71            <p class="description">Espacement égal entre tous les éléments et les bords</p>
72        </section>
73    </div>
74</body>
75</html>