Align Content

La propriété « align-content » du modèle Flexbox permet de contrôler la répartition le long de l'axe secondaire pour plusieurs lignes d'éléments dans un conteneur. Elle ne fonctionne que lorsque les éléments occupent plus de place que l'espace disponible sur l'axe secondaire.

Voici quelques exemples de valeurs de la propriété « align-content » :

• La propriété « flex-start » - les éléments sont répartis au début de l'axe secondaire du conteneur.
• La propriété « flex-end » - les éléments sont répartis à la fin de l'axe secondaire du conteneur.
• La propriété « center » - les éléments sont centrés sur l'axe secondaire du conteneur.
• La propriété « space-between » - les éléments sont répartis de façon homogène sur l'axe secondaire avec un espacement égal entre eux. Le premier élément est au début de l'axe et le dernier à la fin.
• La propriété « space-around » - les éléments sont répartis de façon homogène sur l'axe secondaire avec un espacement égal entre eux et de chaque côté. Cela signifie que l'espacement entre les éléments est plus grand que l'espacement aux bords du conteneur.
• La propriété « space-evenly » - les éléments sont répartis de façon homogène sur l'axe secondaire, de sorte que l'espacement entre eux (et par rapport aux bords) soit égal.

Un exemple d'utilisation de « align-content » pourrait être une situation où nous avons un conteneur Flexbox avec plusieurs lignes d'éléments et où nous voulons contrôler leur répartition le long de l'axe secondaire. Nous pouvons choisir la valeur « align-content » appropriée pour obtenir la disposition souhaitée, esthétique et fonctionnelle pour la page web concernée.

Exercice : Aligner les éléments avec align-content

Dans cet exercice, tu apprendras à utiliser la propriété align-content du modèle Flexbox pour contrôler avec précision la répartition des éléments le long de l'axe secondaire pour plusieurs lignes d'éléments dans un conteneur. 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>Aligner les éléments avec align-content</title>
8</head>
9<body>
10  <section class="container flex-start">
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  </section>
17  <section class="container flex-end">
18    <div>Élément 1</div>
19    <div>Élément 2</div>
20    <div>Élément 3</div>
21    <div>Élément 4</div>
22    <div>Élément 5</div>
23  </section>
24  <section class="container center">
25    <div>Élément 1</div>
26    <div>Élément 2</div>
27    <div>Élément 3</div>
28    <div>Élément 4</div>
29    <div>Élément 5</div>
30  </section>
31  <section class="container space-between">
32    <div>Élément 1</div>
33    <div>Élément 2</div>
34    <div>Élément 3</div>
35    <div>Élément 4</div>
36    <div>Élément 5</div>
37  </section>
38  <section class="container space-around">
39    <div>Élément 1</div>
40    <div>Élément 2</div>
41    <div>Élément 3</div>
42    <div>Élément 4</div>
43    <div>Élément 5</div>
44  </section>
45  <section class="container space-evenly">
46    <div>Élément 1</div>
47    <div>Élément 2</div>
48    <div>Élément 3</div>
49    <div>Élément 4</div>
50    <div>Élément 5</div>
51  </section>
52</body>
53</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  flex-wrap: wrap;
13  border: 1px solid #000;
14  padding: 10px;
15  width: 80%;
16  height: 200px;
17  margin: 10px 0;
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 align-content: flex-start

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

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

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

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

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

Étape 6 : Disposition avec align-content: center

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

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

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

Ajoute un style pour la classe .space-between afin de répartir les éléments de façon homogène sur l'axe secondaire avec un espacement égal entre eux.

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

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

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

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

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

Ajoute un style pour la classe .space-evenly afin de répartir les éléments de façon homogène sur l'axe secondaire avec un espacement égal entre eux et les bords du conteneur.

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

Tâche supplémentaire

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

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 Direction</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flex Direction - Direction de la mise en page</h1>
12        <p class="subtitle">Définis l'axe principal d'un conteneur flex</p>
13
14        <section class="demo-section">
15            <h2>flex-direction: row (par défaut)</h2>
16            <div class="flex-container dir-row">
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>
22            <p class="description">Éléments disposés en ligne de gauche à droite (→)</p>
23        </section>
24
25        <section class="demo-section">
26            <h2>flex-direction: row-reverse</h2>
27            <div class="flex-container dir-row-reverse">
28                <div class="flex-item">1</div>
29                <div class="flex-item">2</div>
30                <div class="flex-item">3</div>
31                <div class="flex-item">4</div>
32            </div>
33            <p class="description">Éléments disposés en ligne de droite à gauche (←)</p>
34        </section>
35
36        <section class="demo-section">
37            <h2>flex-direction: column</h2>
38            <div class="flex-container dir-column">
39                <div class="flex-item">1</div>
40                <div class="flex-item">2</div>
41                <div class="flex-item">3</div>
42                <div class="flex-item">4</div>
43            </div>
44            <p class="description">Éléments disposés en colonne de haut en bas (↓)</p>
45        </section>
46
47        <section class="demo-section">
48            <h2>flex-direction: column-reverse</h2>
49            <div class="flex-container dir-column-reverse">
50                <div class="flex-item">1</div>
51                <div class="flex-item">2</div>
52                <div class="flex-item">3</div>
53                <div class="flex-item">4</div>
54            </div>
55            <p class="description">Éléments disposés en colonne de bas en haut (↑)</p>
56        </section>
57
58        <section class="demo-section practice">
59            <h2>Exercice : hiérarchie égyptienne</h2>
60            <p class="practice-description">Organisons la hiérarchie égyptienne à l'aide de flex-direction !</p>
61
62            <div class="hierarchy-container">
63                <div class="hierarchy-box">
64                    <h3>Hiérarchie horizontale (row)</h3>
65                    <div class="hierarchy row-hierarchy">
66                        <div class="rank">Pharaon</div>
67                        <div class="rank">Vizir</div>
68                        <div class="rank">Scribe</div>
69                        <div class="rank">Paysan</div>
70                    </div>
71                </div>
72
73                <div class="hierarchy-box">
74                    <h3>Hiérarchie verticale (column)</h3>
75                    <div class="hierarchy column-hierarchy">
76                        <div class="rank">Pharaon</div>
77                        <div class="rank">Vizir</div>
78                        <div class="rank">Scribe</div>
79                        <div class="rank">Paysan</div>
80                    </div>
81                </div>
82            </div>
83        </section>
84    </div>
85</body>
86</html>