Module 3 : Mise en page (Layout) et Flexibilité : partie 1

Objectif : Construire des structures complexes directement dans le HTML en maîtrisant Flexbox, CSS Grid et le positionnement.

---

1. Flexbox de A à Z

Flexbox est activé avec la classe flex. Par défaut, les enfants s’alignent horizontalement (row).

A. Initialisation et Direction

• flex : Active Flexbox (direction row par défaut).
• flex-col : Aligne les éléments verticalement (colonne).
• flex-row-reverse / flex-col-reverse : Inverse l’ordre des éléments.

Exemples :

<!-- Rangée horizontale de boutons -->
<div class="flex">
    <button>Annuler</button>
    <button>Valider</button>
</div>

<!-- Liste verticale -->
<div class="flex flex-col">
    <span>Étape 1</span>
    <span>Étape 2</span>
</div>

B. Centrage et Alignement
Deux axes à contrôler :

• Axe principal (horizontal si flex-row) : justify-*
• Axe secondaire (vertical si flex-row) : items-*

Centrage parfait :

<div class="flex h-64 items-center justify-center bg-gray-100">
    <div class="bg-white p-4 shadow">Je suis parfaitement centré</div>
</div>

Distribution (justify-*) :

• justify-start : Groupés au début.
• justify-end : Groupés à la fin.
• justify-between : Espace entre les éléments, premiers et derniers collés aux bords.
• justify-around : Espace égal autour de chaque élément.

C. Gestion de l’espacement avec gap
Préféré aux marges pour espacer les enfants d’un conteneur flex.

• gap-4 : Espace de 1rem entre tous les enfants.
• gap-x-2 : Espacement horizontal uniquement.
• gap-y-8 : Espacement vertical (utile en flex-col).

Exemple :

<!-- Navigation avec espacement constant -->
<nav class="flex items-center gap-6">
    <img src="logo.svg" class="h-8" alt="Logo" />
    <a href="#">Accueil</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

D. Flex Grow, Shrink et Basis
Contrôle du comportement des éléments enfants :

• flex-1 : Prend tout l’espace disponible.
• flex-none : Garde sa taille exacte.
• flex-shrink-0 : Empêche de rétrécir.

Exemple :

<div class="flex gap-4">
    <div class="w-16 flex-none">Avatar</div>
    <!-- Taille fixe -->
    <div class="flex-1">Message principal qui prend toute la place</div>
    <div class="flex-none">12:00</div>
    <!-- Taille fixe -->
</div>

---

2. Grid CSS Avancé

Activez Grid avec grid. Contrôlez les colonnes/lignes et placez les éléments.

A. Définition de la grille

• grid-cols-3 : 3 colonnes de taille égale.
• grid-rows-2 : 2 lignes de taille égale.
• grid-cols-[1fr_2fr_1fr] : Colonnes avec ratios personnalisés.

Exemple :

<!-- Grille 3x2 -->
<div class="grid grid-cols-3 grid-rows-2 gap-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

B. Zones nommées (Layout “Bento Box”)
Définissez des zones sémantiques avec grid-template-areas.

Exemple :

<div class="grid grid-cols-3 grid-rows-3 gap-4">
    <div class="[grid-area:header]">Header</div>
    <div class="[grid-area:sidebar]">Sidebar</div>
    <div class="[grid-area:main]">Main</div>
    <div class="[grid-area:footer]">Footer</div>
</div>

---

3. Positionnement et Z-index

Maîtrisez le flux du document et les superpositions.

Classes de positionnement :

• relative / absolute / fixed / sticky
• top-0, right-4, etc. : Décalages.
• z-10 : Contrôle de la superposition.

Exemple :

<!-- Menu sticky en haut -->
<nav class="sticky top-0 z-50 bg-white shadow">Navigation</nav>

---

4. Containers et Max-width

Stratégies pour les grands écrans avec container et max-w-*.

Utilisation :

<!-- Conteneur centré avec largeur max -->
<div class="container mx-auto px-4">Contenu adapté aux grands écrans</div>

---

Résumé des classes clés Flexbox

Besoin	Classe Tailwind
Activer Flex	flex
Direction colonne	flex-col
Centrer horizontalement	justify-center
Centrer verticalement	items-center
Espace entre éléments	gap-{taille}
Remplir l’espace	flex-1
Taille fixe	flex-none

---

TP : Réaliser une barre de navigation responsive

Consignes :

1. Utilisez flex pour aligner logo et liens horizontalement.
2. Espacez les éléments avec gap-6.
3. Centrez verticalement les liens avec items-center.
4. Ajoutez un fond et un padding pour le style.

Code de départ :

<nav class="flex items-center gap-6 bg-gray-800 p-4 text-white">
    <img src="logo.svg" class="h-8" alt="Logo" />
    <a href="#" class="hover:text-blue-300">Accueil</a>
    <a href="#" class="hover:text-blue-300">Services</a>
    <a href="#" class="hover:text-blue-300">Contact</a>
</nav>

Prochaine étape : Module 4 – Responsive Design et états interactifs pour rendre cette navigation adaptable. 🚀