Les propriétés des enfants

Order

La propriété « order » du modèle Flexbox permet de contrôler l'ordre d'affichage des éléments flex dans un conteneur. Par défaut, les éléments sont disposés dans l'ordre du code source, c'est-à-dire l'ordre dans lequel ils apparaissent dans le code HTML. Mais la propriété « order » permet de modifier cet ordre et de définir librement l'ordre dans lequel les éléments doivent apparaître sur la page.

La valeur de la propriété « order » est un nombre entier. Plus la valeur est basse, plus l'élément sera affiché tôt. Si deux éléments ou plus ont la même valeur « order », leur ordre dans le code HTML est conservé.

Un exemple d'utilisation de la propriété « order » pourrait être une situation où l'on veut changer l'ordre d'affichage de certains éléments flex dans un conteneur. Par exemple, si nous avons deux éléments A et B, nous pouvons définir « order: 2 » pour l'élément A et « order: 1 » pour l'élément B. En conséquence, l'élément B sera affiché en premier, bien qu'il apparaisse après l'élément A dans le code source.

Grâce à la propriété « order », on peut manipuler de façon flexible l'ordre des éléments flex, ce qui nous donne un meilleur contrôle sur la disposition de la page et la présentation du contenu.

1.box {
2  order: 5;
3}

La propriété « flex-grow » du modèle Flexbox définit la capacité d'un élément à grandir si nécessaire. Elle accepte une valeur sans unité qui sert de proportion. La valeur « flex-grow » détermine la quantité d'espace que tel élément doit occuper à l'intérieur du conteneur flex.

Par exemple, si tous les éléments d'un conteneur ont « flex-grow: 1 », l'espace disponible restant dans le conteneur sera réparti à parts égales entre tous les enfants. Si l'un des enfants a « flex-grow: 2 », cela signifie que cet enfant essaiera d'occuper deux fois plus d'espace que les autres éléments.

Un exemple d'utilisation de la propriété « flex-grow » pourrait être un conteneur Flexbox avec trois éléments portant la classe « box ». Si nous définissons « flex-grow: 2 » pour le premier élément et « flex-grow: 1 » pour les deux autres, le premier élément essaiera d'occuper deux fois plus d'espace que les éléments restants.

La propriété « flex-shrink » du modèle Flexbox définit la capacité d'un élément flex à rétrécir au besoin. Elle fonctionne sur la base d'une proportion, comme « flex-grow ». La valeur « flex-shrink » détermine comment un élément doit rétrécir par rapport aux autres éléments lorsque l'espace disponible dans le conteneur est limité.

Par exemple, si tous les éléments ont « flex-shrink: 1 », l'espace disponible restant dans le conteneur sera réparti à parts égales entre tous les enfants. Si l'un des enfants a « flex-shrink: 2 », cela signifie que cet enfant essaiera de rétrécir deux fois plus vite que les autres éléments lorsque l'espace disponible est limité.

Un exemple d'utilisation de la propriété « flex-shrink » pourrait être un conteneur Flexbox avec trois éléments portant la classe « box ». Si nous définissons « flex-shrink: 2 » pour le premier élément et « flex-shrink: 1 » pour les deux autres, le premier élément essaiera de rétrécir deux fois plus vite que les éléments restants lorsque l'espace disponible est limité.

La propriété « flex-basis » du modèle Flexbox spécifie la taille initiale d'un élément avant la prise en compte de la croissance ou du rétrécissement. Elle peut être définie comme une valeur sans unité ou en pourcentage par rapport à la largeur du conteneur.

Par exemple, si nous définissons « flex-basis: 200px » pour un élément, cet élément aura initialement une largeur de 200 pixels. Ce n'est qu'après la prise en compte des valeurs « flex-grow » et « flex-shrink » que l'élément ajustera sa largeur en fonction de l'espace disponible dans le conteneur.

Un exemple d'utilisation de la propriété « flex-basis » pourrait être un conteneur Flexbox avec trois éléments portant la classe « box ». Si nous définissons « flex-basis: 200px » pour le premier élément et « flex-basis: 150px » pour les deux autres, le premier élément aura une largeur initiale de 200 pixels, et les éléments restants une largeur initiale de 150 pixels.

La propriété « align-self » du modèle Flexbox permet de centrer individuellement un élément le long de l'axe secondaire, en contournant les réglages définis pour l'ensemble du conteneur. Elle fonctionne de manière similaire à la propriété « align-items », mais ne s'applique qu'à un élément précis, et non à tous les éléments du conteneur.

Par exemple, si nous définissons « align-self: center » pour l'un des éléments, cet élément sera centré le long de l'axe secondaire, quels que soient les réglages « align-items » de l'ensemble du conteneur.

Un exemple d'utilisation de la propriété « align-self » pourrait être un conteneur Flexbox avec trois éléments portant la classe « box ». Pour l'un des éléments, nous définissons « align-self: center », ce qui centre cet élément le long de l'axe secondaire, tandis que les éléments restants conservent les réglages définis pour l'ensemble du conteneur.

Exercice : Les propriétés des enfants dans Flexbox

Dans cet exercice, tu apprendras à utiliser les propriétés order, flex-grow, flex-shrink, flex-basis et align-self du modèle Flexbox pour contrôler avec précision la disposition des é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 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>Les propriétés des enfants dans Flexbox</title>
8</head>
9<body>
10  <section class="container">
11    <div class="box order-1">Élément 1</div>
12    <div class="box order-2">Élément 2</div>
13    <div class="box order-3">Élément 3</div>
14  </section>
15  <section class="container">
16    <div class="box grow-2">Élément 1</div>
17    <div class="box grow-1">Élément 2</div>
18    <div class="box grow-1">Élément 3</div>
19  </section>
20  <section class="container">
21    <div class="box shrink-2">Élément 1</div>
22    <div class="box shrink-1">Élément 2</div>
23    <div class="box shrink-1">Élément 3</div>
24  </section>
25  <section class="container">
26    <div class="box basis-200">Élément 1</div>
27    <div class="box basis-150">Élément 2</div>
28    <div class="box basis-100">Élément 3</div>
29  </section>
30  <section class="container">
31    <div class="box self-center">Élément 1</div>
32    <div class="box">Élément 2</div>
33    <div class="box">É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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17}
18
19.container .box {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Étape 4 : Utiliser la propriété order

Ajoute des styles pour les classes .order-1, .order-2 et .order-3 afin de changer l'ordre d'affichage des éléments.

1/* Disposition avec order */
2.order-1 {
3  order: 1;
4}
5
6.order-2 {
7  order: 2;
8}
9
10.order-3 {
11  order: 3;
12}

Étape 5 : Utiliser la propriété flex-grow

Ajoute des styles pour les classes .grow-1 et .grow-2 afin de changer les proportions de croissance des éléments.

1/* Disposition avec flex-grow */
2.grow-1 {
3  flex-grow: 1;
4}
5
6.grow-2 {
7  flex-grow: 2;
8}

Étape 6 : Utiliser la propriété flex-shrink

Ajoute des styles pour les classes .shrink-1 et .shrink-2 afin de changer les proportions de rétrécissement des éléments.

1/* Disposition avec flex-shrink */
2.shrink-1 {
3  flex-shrink: 1;
4}
5
6.shrink-2 {
7  flex-shrink: 2;
8}

Étape 7 : Utiliser la propriété flex-basis

Ajoute des styles pour les classes .basis-100, .basis-150 et .basis-200 afin de définir la taille initiale des éléments.

1/* Disposition avec flex-basis */
2.basis-100 {
3  flex-basis: 100px;
4}
5
6.basis-150 {
7  flex-basis: 150px;
8}
9
10.basis-200 {
11  flex-basis: 200px;
12}

Étape 8 : Utiliser la propriété align-self

Ajoute un style pour la classe .self-center afin de centrer l'un des éléments le long de l'axe secondaire.

1/* Disposition avec align-self */
2.self-center {
3  align-self: center;
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>Les propriétés des enfants dans Flexbox</title>
8</head>
9<body>
10  <section class="container">
11    <div class="box order-1">Élément 1</div>
12    <div class="box order-2">Élément 2</div>
13    <div class="box order-3">Élément 3</div>
14  </section>
15  <section class="container">
16    <div class="box grow-2">Élément 1</div>
17    <div class="box grow-1">Élément 2</div>
18    <div class="box grow-1">Élément 3</div>
19  </section>
20  <section class="container">
21    <div class="box shrink-2">Élément 1</div>
22    <div class="box shrink-1">Élément 2</div>
23    <div class="box shrink-1">Élément 3</div>
24  </section>
25  <section class="container">
26    <div class="box basis-200">Élément 1</div>
27    <div class="box basis-150">Élément 2</div>
28    <div class="box basis-100">Élément 3</div>
29  </section>
30  <section class="container">
31    <div class="box self-center">Élément 1</div>
32    <div class="box">Élément 2</div>
33    <div class="box">É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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17}
18
19.container .box {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Disposition avec order */
28.order-1 {
29  order: 1;
30}
31
32.order-2 {
33  order: 2;
34}
35
36.order-3 {
37  order: 3;
38}
39
40/* Disposition avec flex-grow */
41.grow-1 {
42  flex-grow: 1;
43}
44
45.grow-2 {
46  flex-grow: 2;
47}
48
49/* Disposition avec flex-shrink */
50.shrink-1 {
51  flex-shrink: 1;
52}
53
54.shrink-2 {
55  flex-shrink: 2;
56}
57
58/* Disposition avec flex-basis */
59.basis-100 {
60  flex-basis: 100px;
61}
62
63.basis-150 {
64  flex-basis: 150px;
65}
66
67.basis-200 {
68  flex-basis: 200px;
69}
70
71/* Disposition avec align-self */
72.self-center {
73  align-self: center;
74}

Tâche supplémentaire

1. Ajoute d'autres sections avec différentes valeurs de order, flex-grow, flex-shrink, flex-basis et align-self 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 les propriétés order, flex-grow, flex-shrink, flex-basis et align-self 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 - Flex Grow & Shrink</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flex Grow & Shrink - Flexibilité des éléments</h1>
12        <p class="subtitle">Contrôle la façon dont les éléments grandissent et rétrécissent</p>
13
14        <section class="demo-section">
15            <h2>flex-grow: 0 (par défaut)</h2>
16            <div class="flex-container">
17                <div class="flex-item grow-0">flex-grow: 0</div>
18                <div class="flex-item grow-0">flex-grow: 0</div>
19                <div class="flex-item grow-0">flex-grow: 0</div>
20            </div>
21            <p class="description">Les éléments ne grandissent pas - l'espace libre demeure</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>flex-grow: 1</h2>
26            <div class="flex-container">
27                <div class="flex-item grow-1">flex-grow: 1</div>
28                <div class="flex-item grow-1">flex-grow: 1</div>
29                <div class="flex-item grow-1">flex-grow: 1</div>
30            </div>
31            <p class="description">Tous les éléments grandissent uniformément en remplissant l'espace</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>flex-grow: valeurs différentes</h2>
36            <div class="flex-container">
37                <div class="flex-item grow-1">flex-grow: 1</div>
38                <div class="flex-item grow-2">flex-grow: 2 (deux fois plus)</div>
39                <div class="flex-item grow-3">flex-grow: 3 (trois fois plus)</div>
40            </div>
41            <p class="description">Les éléments grandissent proportionnellement aux valeurs flex-grow</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>flex-shrink: 0 vs 1</h2>
46            <div class="flex-container">
47                <div class="flex-item shrink-0">flex-shrink: 0<br>(ne rétrécit pas)</div>
48                <div class="flex-item shrink-1">flex-shrink: 1</div>
49                <div class="flex-item shrink-1">flex-shrink: 1</div>
50                <div class="flex-item shrink-1">flex-shrink: 1</div>
51            </div>
52            <p class="description">Le premier élément garde sa taille, les autres rétrécissent</p>
53        </section>
54
55        <section class="demo-section practice">
56            <h2>Exercice : colonnes égyptiennes</h2>
57            <p class="practice-description">Construire un temple - des colonnes aux proportions différentes</p>
58
59            <div class="temple">
60                <div class="column small-column">
61                    <div class="capital">▥</div>
62                    <div class="shaft">Colonne<br>petite<br>(grow: 1)</div>
63                    <div class="base">▓</div>
64                </div>
65
66                <div class="column medium-column">
67                    <div class="capital">▥</div>
68                    <div class="shaft">Colonne<br>moyenne<br>(grow: 2)</div>
69                    <div class="base">▓</div>
70                </div>
71
72                <div class="column large-column">
73                    <div class="capital">▥</div>
74                    <div class="shaft">Colonne<br>grande<br>(grow: 3)</div>
75                    <div class="base">▓</div>
76                </div>
77
78                <div class="column small-column">
79                    <div class="capital">▥</div>
80                    <div class="shaft">Colonne<br>petite<br>(grow: 1)</div>
81                    <div class="base">▓</div>
82                </div>
83            </div>
84
85            <div class="temple-info">
86                <p>Chaque colonne grandit proportionnellement à sa valeur flex-grow</p>
87            </div>
88        </section>
89    </div>
90</body>
91</html>