🚀 Semaine 3 - Jour 2 : Flexbox Avancé

📚 Objectifs du jour

Maîtriser les propriétés avancées de Flexbox : flex-wrap, flex-grow, flex-shrink, flex-basis, align-self, order. Créer des layouts professionnels et responsives.

🔄 flex-wrap

Retour à la ligne automatique

                        .container {

                          display: flex;

                          flex-wrap: wrap;

                        }

✅ Usage : Galeries, grilles de cartes, layouts responsives

📈 flex-grow

Capacité à grandir (occuper l'espace disponible)

                        .item1 { flex-grow: 0; } /* Ne grandit pas */

                        .item2 { flex-grow: 1; } /* Grandit 1x */

                        .item3 { flex-grow: 2; } /* Grandit 2x (double) */

grow: 0

grow: 1

grow: 2 (double)

💡 Astuce : flex-grow: 1 est très utilisé pour que les éléments remplissent l'espace

📉 flex-shrink

Capacité à rétrécir

                        .item1 { flex-shrink: 0; } /* Ne rétrécit JAMAIS */

                        .item2 { flex-shrink: 1; } /* Peut rétrécir (défaut) */

shrink: 0 (garde sa taille)

shrink: 1 (peut rétrécir)

⚠️ Note : Le conteneur a width: 400px, mais les items font 200px chacun. L'item avec shrink: 1 rétrécit.

📏 flex-basis

Taille de base (avant distribution de l'espace)

                        .item {

                          flex-basis: 200px; /* Taille de départ */

                        }

basis: 200px

💡 Différence avec width : flex-basis est la taille AVANT la redistribution, width est fixe

⚡ Propriété flex (shorthand)

Syntaxe raccourcie : flex = grow shrink basis

                        .item { flex: [grow] [shrink] [basis]; }

                        /* Valeurs courantes */

                        flex: 0 0 auto; /* Taille fixe, ne grandit/rétrécit pas */

                        flex: 1; /* Équivaut à flex: 1 1 0% (grandit pour remplir) */

                        flex: 2; /* 2× plus grand que flex: 1 */

flex: 0 0 auto

flex: 1

flex: 2

🌟 Recommandation : Utiliser flex: 1 pour des colonnes égales qui remplissent l'espace

🎯 align-self

Alignement individuel (overrides align-items)

                        .item1 { align-self: flex-start; }

                        .item2 { align-self: center; }

                        .item3 { align-self: flex-end; }

                        .item4 { align-self: stretch; }

flex-start

center

flex-end

stretch

🔢 order

Réorganiser l'ordre visuel (sans changer le HTML)

                        .item1 { order: 3; }

                        .item2 { order: 1; }

                        .item3 { order: 2; }

HTML : 1er (order: 3)

HTML : 2ème (order: 1)

HTML : 3ème (order: 2)

📌 Ordre d'affichage : 2ème élément (order: 1), puis 3ème (order: 2), puis 1er (order: 3)

✅ Usage : Réorganiser sur mobile, mettre un élément en premier/dernier

🎨 Exemples pratiques

Navbar avec Flexbox

                    .navbar {

                      display: flex;

                      justify-content: space-between;

                      align-items: center;

                    }

Grille de cartes responsive

                    .card-layout {

                      display: flex;

                      flex-wrap: wrap;

                      gap: 20px;

                    }

                    .card {

                      flex: 1 1 300px;

                    }

Card 1

Contenu de la carte flexible

Card 2

S'adapte automatiquement

Card 3

Responsive sans media query !

Layout Sidebar + Contenu

                    .sidebar {

                      flex: 0 0 250px; /* Largeur fixe */

                    }

                    .main-content {

                      flex: 1; /* Prend l'espace restant */

                    }

Footer multi-colonnes

                    .footer {

                      display: flex;

                      flex-wrap: wrap;

                      justify-content: space-between;

                    }

                    .footer-section {

                      flex: 1 1 200px;

                    }

Froggiesplaining :

🎯 Objectifs :
✅ Maîtriser flex-wrap pour les retours à la ligne
✅ Comprendre flex-grow, flex-shrink, flex-basis
✅ Utiliser la shorthand flex: grow shrink basis
✅ Aligner individuellement avec align-self
✅ Réorganiser visuellement avec order
✅ Créer des layouts professionnels

📖 Formules magiques :
• flex: 1 = prend l'espace disponible (égal)
• flex: 0 0 250px = taille fixe, ne change jamais
• flex: 1 1 300px = min 300px, puis flexible
• flex-wrap: wrap = responsive automatique

🏋️ Exercice :
Créez une page complète avec :
• Navbar (logo gauche, menu droite)
• Layout sidebar fixe + contenu flexible
• Grille de 6 cartes (flex-wrap)
• Footer 3 colonnes responsive