Maîtrise de Flexbox en CSS

📋 Plan du Cours

1. Introduction à Flexbox et usages
2. Terminologie conteneur, items et axes
3. flex-direction et orientation de l’axe principal
4. flex-wrap et gestion du retour à la ligne
5. justify-content et alignement sur l’axe principal
6. align-items, align-content et align-self
7. Propriétés flex des éléments et raccourci flex
8. order et modification de l’ordre visuel
9. Exemples pratiques de mise en page

📖 1. Introduction à Flexbox et usages

🔑 Notions clés & Définitions

• Flexbox : Module CSS de mise en page en une dimension qui organise des éléments dans un conteneur flexible.
• Barres de navigation : Mise en page typique où des liens s’alignent et se répartissent facilement sur l’axe principal.
• Galeries d’images : Disposition en lignes/colonnes d’images qui s’adapte aux tailles d’écran grâce aux règles flex.
• Cartes de contenu : Composants disposés en rangées ou colonnes pour créer une grille responsive avec Flexbox.

📝 Points essentiels

• Flexbox distribue l’espace entre les éléments du conteneur.
• Flexbox aligne les éléments plus facilement que des méthodes anciennes.
• Flexbox s’adapte à différentes tailles d’écran.
• Flexbox est présenté comme plus simple que float pour les layouts.
• Flexbox facilite l’alignement vertical.
• Flexbox permet de modifier l’ordre visuel sans changer le HTML.

💡 Astuce mémo

Flexbox = 1D pour aligner + répartir + adapter.

📖 2. Terminologie conteneur, items et axes