Aligner les éléments sur les axes vertical et horizontal

1. Axe principal

L'axe principal est l'axe primaire le long duquel les éléments flex sont disposés dans un conteneur flex. La direction de cet axe est contrôlée par la propriété flex-direction.

• flex-direction: row : L'axe principal est horizontal, de gauche à droite (pour les langues qui s'écrivent de gauche à droite). C'est la direction par défaut.

• flex-direction: column : L'axe principal est vertical, de haut en bas.

La propriété justify-content sert à gérer la disposition des éléments le long de l'axe principal.

2. Axe secondaire

L'axe secondaire est perpendiculaire à l'axe principal. Si l'axe principal est horizontal, l'axe secondaire sera vertical et vice versa.

La propriété align-items sert à gérer la disposition des éléments le long de l'axe secondaire.

Exemples et utilisation

Axe horizontal (Row) :

css .container { display: flex; flex-direction: row; // l'axe principal est horizontal justify-content: center; // centre les éléments le long de l'axe principal align-items: flex-start; // aligne les éléments en haut de l'axe secondaire }

Axe vertical (Column) :

css .container { display: flex; flex-direction: column; // l'axe principal est vertical justify-content: space-around; // répartit les éléments de façon homogène le long de l'axe principal align-items: flex-end; // aligne les éléments à droite de l'axe secondaire }

Récapitulatif

Comprendre les axes vertical et horizontal dans Flexbox est essentiel pour contrôler la disposition des éléments sur une page.

Exercice : Aligner les éléments sur les axes vertical et horizontal

Dans cet exercice, tu apprendras à utiliser les propriétés flex-direction, justify-content et align-items du modèle Flexbox pour contrôler avec précision la disposition des éléments dans un conteneur Flexbox, sur les deux axes, vertical et horizontal. Ta mission sera de créer une page web avec des conteneurs disposés selon différentes mises en page à l'aide de ces propriétés.

É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 les deux axes</title>
8</head>
9<body>
10  <section class="container row-center-start">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="container column-around-end">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="container row-space-between-center">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25</body>
26</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: 200px;
16  margin: 10px 0;
17}
18
19.container div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Étape 4 : Disposition avec row, justify-content: center et align-items: flex-start

Ajoute un style pour la classe .row-center-start afin de positionner les éléments horizontalement, centrés le long de l'axe principal et alignés au début de l'axe secondaire.

1/* Disposition avec row, justify-content: center et align-items: flex-start */
2.row-center-start {
3  flex-direction: row;
4  justify-content: center;
5  align-items: flex-start;
6}

Étape 5 : Disposition avec column, justify-content: space-around et align-items: flex-end

Ajoute un style pour la classe .column-around-end afin de positionner les éléments verticalement, répartis de façon homogène le long de l'axe principal et alignés à la fin de l'axe secondaire.

1/* Disposition avec column, justify-content: space-around et align-items: flex-end */
2.column-around-end {
3  flex-direction: column;
4  justify-content: space-around;
5  align-items: flex-end;
6}

Étape 6 : Disposition avec row, justify-content: space-between et align-items: center

Ajoute un style pour la classe .row-space-between-center afin de positionner les éléments horizontalement, répartis de façon homogène avec un espacement entre eux le long de l'axe principal et centrés sur l'axe secondaire.

1/* Disposition avec row, justify-content: space-between et align-items: center */
2.row-space-between-center {
3  flex-direction: row;
4  justify-content: space-between;
5  align-items: center;
6}

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 les deux axes</title>
8</head>
9<body>
10  <section class="container row-center-start">
11    <div>Élément 1</div>
12    <div>Élément 2</div>
13    <div>Élément 3</div>
14  </section>
15  <section class="container column-around-end">
16    <div>Élément 1</div>
17    <div>Élément 2</div>
18    <div>Élément 3</div>
19  </section>
20  <section class="container row-space-between-center">
21    <div>Élément 1</div>
22    <div>Élément 2</div>
23    <div>Élément 3</div>
24  </section>
25</body>
26</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: 200px;
16  margin: 10px 0;
17}
18
19.container div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Disposition avec row, justify-content: center et align-items: flex-start */
28.row-center-start {
29  flex-direction: row;
30  justify-content: center;
31  align-items: flex-start;
32}
33
34/* Disposition avec column, justify-content: space-around et align-items: flex-end */
35.column-around-end {
36  flex-direction: column;
37  justify-content: space-around;
38  align-items: flex-end;
39}
40
41/* Disposition avec row, justify-content: space-between et align-items: center */
42.row-space-between-center {
43  flex-direction: row;
44  justify-content: space-between;
45  align-items: center;
46}

Tâche supplémentaire

1. Crée une section supplémentaire avec ta propre disposition en utilisant différentes combinaisons des propriétés flex-direction, justify-content et align-items.
2. Ajoute des styles pour changer les couleurs de fond, les marges ou 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 les propriétés flex-direction, justify-content et align-items du modèle Flexbox pour contrôler avec précision la disposition des éléments dans un conteneur.

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 - Align Items</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Align Items - Alignement sur l'axe transversal</h1>
12        <p class="subtitle">Contrôle la position des éléments le long de l'axe transversal</p>
13
14        <section class="demo-section">
15            <h2>align-items: stretch (par défaut)</h2>
16            <div class="flex-container align-stretch">
17                <div class="flex-item">Élément 1</div>
18                <div class="flex-item">Élément 2<br>Deux lignes</div>
19                <div class="flex-item">Élément 3</div>
20            </div>
21            <p class="description">Les éléments s'étirent pour remplir le conteneur</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>align-items: flex-start</h2>
26            <div class="flex-container align-start">
27                <div class="flex-item">Élément 1</div>
28                <div class="flex-item tall">Élément 2<br>Plus grand<br>Élément</div>
29                <div class="flex-item">Élément 3</div>
30            </div>
31            <p class="description">Les éléments alignés sur le bord supérieur du conteneur</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>align-items: flex-end</h2>
36            <div class="flex-container align-end">
37                <div class="flex-item">Élément 1</div>
38                <div class="flex-item tall">Élément 2<br>Plus grand<br>Élément</div>
39                <div class="flex-item">Élément 3</div>
40            </div>
41            <p class="description">Les éléments alignés sur le bord inférieur du conteneur</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>align-items: center</h2>
46            <div class="flex-container align-center">
47                <div class="flex-item">Élément 1</div>
48                <div class="flex-item tall">Élément 2<br>Plus grand<br>Élément</div>
49                <div class="flex-item">Élément 3</div>
50            </div>
51            <p class="description">Les éléments centrés le long de l'axe transversal</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>align-items: baseline</h2>
56            <div class="flex-container align-baseline">
57                <div class="flex-item small">Petit</div>
58                <div class="flex-item medium">Moyen</div>
59                <div class="flex-item large">Grand</div>
60            </div>
61            <p class="description">Les éléments alignés sur la ligne de base du texte</p>
62        </section>
63
64        <section class="demo-section practice">
65            <h2>Exercice : galerie égyptienne</h2>
66            <div class="gallery">
67                <div class="gallery-item">
68                    <div class="icon">◆</div>
69                    <div class="title">Vase</div>
70                </div>
71                <div class="gallery-item">
72                    <div class="icon large-icon">▲</div>
73                    <div class="title">Couronne<br>du Pharaon</div>
74                </div>
75                <div class="gallery-item">
76                    <div class="icon">◆</div>
77                    <div class="title">Papyrus</div>
78                </div>
79            </div>
80        </section>
81    </div>
82</body>
83</html>