Cours HTML et CSS · Module 4: Flexbox
Tâche principale : Le temple Flexbox virtuel
Dans cette leçon7
Place à la tâche principale du module ! Comme le dit Mohamed : « Un véritable architecte sait construire un temple complet en combinant toutes les techniques qu'il a apprises. » Dans cette tâche, tu vas créer une page web complète avec un en-tête, une navigation, une section principale et un pied de page, le tout construit avec Flexbox. La structure de la page sera réactive et flexible, comme le plan d'un temple égyptien parfait.
Étape 1 : Crée la structure de base d'un document HTML
Crée un nouveau fichier HTML et ajoute une structure de base de document HTML. Ajoute des éléments <header>, <nav>, <main> et <footer> pour créer les sections de la page.
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>Mon site web</title>
8</head>
9<body>
10 <header class="header">
11 <h1>Mon site web</h1>
12 <nav class="nav">
13 <ul>
14 <li><a href="#">Accueil</a></li>
15 <li><a href="#">À propos</a></li>
16 <li><a href="#">Services</a></li>
17 <li><a href="#">Contact</a></li>
18 </ul>
19 </nav>
20 </header>
21 <main class="main">
22 <section class="content">
23 <h2>Bienvenue sur notre site web</h2>
24 <p>Voici un texte d'exemple dans la section principale de la page. Tu peux ajouter ici plus d'informations sur ton entreprise, tes produits ou tes services.</p>
25 </section>
26 <aside class="sidebar">
27 <h2>Actualités</h2>
28 <p>Les dernières informations sur notre entreprise et notre secteur.</p>
29 </aside>
30 </main>
31 <footer class="footer">
32 <p>© 2023 Mon site web. Tous droits réservés.</p>
33 </footer>
34</body>
35</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 .header, .nav, .main, .content, .sidebar et .footer.
1body {
2 font-family: Arial, sans-serif;
3 margin: 0;
4 padding: 0;
5 background-color: #f0f0f0;
6}
7
8.header {
9 background-color: #333;
10 color: #fff;
11 padding: 20px;
12 text-align: center;
13}
14
15.nav ul {
16 list-style-type: none;
17 padding: 0;
18 display: flex;
19 justify-content: center;
20}
21
22.nav li {
23 margin: 0 15px;
24}
25
26.nav a {
27 color: #fff;
28 text-decoration: none;
29 font-weight: bold;
30}
31
32.main {
33 display: flex;
34 flex-wrap: wrap;
35 justify-content: space-between;
36 padding: 20px;
37 background-color: #fff;
38}
39
40.content {
41 flex: 1;
42 min-width: 60%;
43 padding: 20px;
44}
45
46.sidebar {
47 flex: 1;
48 min-width: 30%;
49 padding: 20px;
50 background-color: #f9f9f9;
51}
52
53.footer {
54 background-color: #333;
55 color: #fff;
56 text-align: center;
57 padding: 10px;
58 position: absolute;
59 bottom: 0;
60 width: 100%;
61}Étape 4 : Ajoute des media queries pour la réactivité
Pour rendre la page réactive, ajoute des media queries afin d'adapter la mise en page sur les écrans plus petits.
1@media (max-width: 768px) {
2 .main {
3 flex-direction: column;
4 }
5
6 .content, .sidebar {
7 min-width: 100%;
8 margin-bottom: 20px;
9 }
10
11 .footer {
12 position: static;
13 }
14}Étape 5 : Finalisation
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>Mon site web</title>
8</head>
9<body>
10 <header class="header">
11 <h1>Mon site web</h1>
12 <nav class="nav">
13 <ul>
14 <li><a href="#">Accueil</a></li>
15 <li><a href="#">À propos</a></li>
16 <li><a href="#">Services</a></li>
17 <li><a href="#">Contact</a></li>
18 </ul>
19 </nav>
20 </header>
21 <main class="main">
22 <section class="content">
23 <h2>Bienvenue sur notre site web</h2>
24 <p>Voici un texte d'exemple dans la section principale de la page. Tu peux ajouter ici plus d'informations sur ton entreprise, tes produits ou tes services.</p>
25 </section>
26 <aside class="sidebar">
27 <h2>Actualités</h2>
28 <p>Les dernières informations sur notre entreprise et notre secteur.</p>
29 </aside>
30 </main>
31 <footer class="footer">
32 <p>© 2023 Mon site web. Tous droits réservés.</p>
33 </footer>
34</body>
35</html>Fichier CSS (styles.css)
1body {
2 font-family: Arial, sans-serif;
3 margin: 0;
4 padding: 0;
5 background-color: #f0f0f0;
6}
7
8.header {
9 background-color: #333;
10 color: #fff;
11 padding: 20px;
12 text-align: center;
13}
14
15.nav ul {
16 list-style-type: none;
17 padding: 0;
18 display: flex;
19 justify-content: center;
20}
21
22.nav li {
23 margin: 0 15px;
24}
25
26.nav a {
27 color: #fff;
28 text-decoration: none;
29 font-weight: bold;
30}
31
32.main {
33 display: flex;
34 flex-wrap: wrap;
35 justify-content: space-between;
36 padding: 20px;
37 background-color: #fff;
38}
39
40.content {
41 flex: 1;
42 min-width: 60%;
43 padding: 20px;
44}
45
46.sidebar {
47 flex: 1;
48 min-width: 30%;
49 padding: 20px;
50 background-color: #f9f9f9;
51}
52
53.footer {
54 background-color: #333;
55 color: #fff;
56 text-align: center;
57 padding: 10px;
58 position: absolute;
59 bottom: 0;
60 width: 100%;
61}
62
63@media (max-width: 768px) {
64 .main {
65 flex-direction: column;
66 }
67
68 .content, .sidebar {
69 min-width: 100%;
70 margin-bottom: 20px;
71 }
72
73 .footer {
74 position: static;
75 }
76}Tâche supplémentaire
- Ajoute davantage de sections au contenu principal, comme des articles supplémentaires ou des galeries d'images.
- Mets tes compétences à l'épreuve en ajoutant plus d'éléments à la navigation et en les adaptant aux écrans plus petits.
- Ajoute différents styles à ta page, comme changer les couleurs, les tailles de police et d'autres propriétés des éléments afin de mieux comprendre comment fonctionnent les différentes options de CSS.
- Ajoute des animations à la navigation et à d'autres éléments de la page pour ajouter de l'interactivité et une meilleure expérience utilisateur.
Récapitulatif du module Flexbox
Dans ce module, tu as appris l'ensemble de la boîte à outils Flexbox :
display: flex- activer Flexbox sur un conteneurflex-direction- direction de l'axe principal (row, column, row-reverse, column-reverse)justify-content- répartition le long de l'axe principalalign-items- alignement le long de l'axe secondaireflex-wrap- retour à la ligne des élémentsgap- espacement entre les élémentsflex-grow,flex-shrink,flex-basis- contrôle de la taille des élémentsorder- changer l'ordre visuelalign-self- alignement individuel des éléments
Flexbox est un outil puissant qui permet de créer des mises en page flexibles sans avoir besoin de float, de position ou de bidouilles compliquées. Comme le disent les architectes des pyramides : « La flexibilité dans la planification est la clé d'une construction durable ! »
Crée ta page dans l'éditeur ci-dessous :
Code de cette leçon : 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 <title>Flexbox - Align Self</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>Align Self - Alignement individuel</h1>
12 <p class="subtitle">Remplace align-items pour des éléments individuels</p>
13
14 <section class="demo-section">
15 <h2>Un élément aligné différemment</h2>
16 <div class="flex-container">
17 <div class="flex-item">Normal</div>
18 <div class="flex-item self-start">align-self: flex-start</div>
19 <div class="flex-item">Normal</div>
20 </div>
21 <p class="description">Élément du milieu aligné en haut indépendamment des autres</p>
22 </section>
23
24 <section class="demo-section">
25 <h2>Toutes les propriétés align-self</h2>
26 <div class="flex-container tall">
27 <div class="flex-item self-auto">auto (hérite)</div>
28 <div class="flex-item self-start">flex-start</div>
29 <div class="flex-item self-center">center</div>
30 <div class="flex-item self-end">flex-end</div>
31 <div class="flex-item self-stretch">stretch</div>
32 <div class="flex-item self-baseline">baseline</div>
33 </div>
34 <p class="description">Chaque élément avec un alignement différent</p>
35 </section>
36
37 <section class="demo-section practice">
38 <h2>Exercice : procession égyptienne</h2>
39 <p class="practice-description">Le pharaon et ses sujets en procession - chacun à son propre niveau</p>
40
41 <div class="procession">
42 <div class="person peasant">
43 <div class="figure">◉</div>
44 <div class="label">Paysan</div>
45 </div>
46
47 <div class="person scribe">
48 <div class="figure">◉</div>
49 <div class="label">Scribe</div>
50 </div>
51
52 <div class="person pharaoh">
53 <div class="figure">◉</div>
54 <div class="label">Pharaon</div>
55 </div>
56
57 <div class="person priest">
58 <div class="figure">◉</div>
59 <div class="label">Prêtre</div>
60 </div>
61
62 <div class="person warrior">
63 <div class="figure">◉</div>
64 <div class="label">Guerrier</div>
65 </div>
66
67 <div class="person servant">
68 <div class="figure">◉</div>
69 <div class="label">Serviteur</div>
70 </div>
71 </div>
72
73 <div class="legend">
74 <h3>Hiérarchie sociale :</h3>
75 <ul>
76 <li><span class="status pharaoh-status">Pharaon</span> - au sommet (flex-end)</li>
77 <li><span class="status priest-status">Prêtre</span> - élevé (center-high)</li>
78 <li><span class="status scribe-status">Scribe</span> - intermédiaire (center)</li>
79 <li><span class="status warrior-status">Guerrier</span> - intermédiaire-bas (center-low)</li>
80 <li><span class="status peasant-status">Paysan</span> - bas (flex-start)</li>
81 <li><span class="status servant-status">Serviteur</span> - le plus bas (stretch)</li>
82 </ul>
83 </div>
84 </section>
85 </div>
86</body>
87</html>Tu as repéré une erreur dans cette leçon ?