CSS Layout Moderne

CSS Flexbox

Maîtrisez le système de layout qui révolutionne la création de mises en page. Alignement parfait, distribution intelligente et design responsive.

📐 Layout 1D
🎯 Alignement facile
📱 Responsive natif

Qu'est-ce que Flexbox ?

❌ Avant Flexbox

Centrage vertical :

position: absolute;
top: 50%;
transform: translateY(-50%);

Complexe et fragile

Colonnes égales :

float: left;
width: 33.333%;
/* + clearfix hack */

Calculs et hacks

✅ Avec Flexbox

Centrage parfait :

display: flex;
justify-content: center;
align-items: center;

Simple et intuitif

Colonnes flexibles :

display: flex;
gap: 1rem;
/* Items: flex: 1 */

Automatiquement équilibrées

🎯 Concepts Fondamentaux

Terminologie :

Flex Container : L'élément parent avec display: flex
Flex Items : Les enfants directs du container
Main Axis : Axe principal (horizontal par défaut)
Cross Axis : Axe perpendiculaire au main axis

Diagramme :

FLEX CONTAINER
Main Axis →
Cross Axis ↓
ITEM 1
ITEM 2
ITEM 3

Propriétés du Flex Container

🚀 display: flex

/* Activation de Flexbox */
.container {
  display: flex;
}

/* Alternative inline */
.container-inline {
  display: inline-flex;
}

Comparaison :

Sans Flexbox (block) :

Item 1
Item 2
Item 3

Avec display: flex :

Item 1
Item 2
Item 3

🎯 justify-content (Main Axis)

Démo Interactive :

1
2
3
justify-content: flex-start;

↕️ align-items (Cross Axis)

1
2
Plus
Grand
3
align-items: stretch;

📏 flex-direction

1
2
3
flex-direction: row;

Exemples Pratiques

🎯 Centrage Parfait

/* Le Saint Graal du CSS */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
✨ Avantages :
  • • Fonctionne avec tout contenu
  • • Responsive par défaut
  • • 3 lignes de CSS seulement

Parfaitement centré !

Horizontal et vertical

🧭 Navigation Responsive

/* Navigation principale */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-menu {
  display: flex;
  gap: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
}

Desktop :

Mobile :

🃏 Grille de Cards Flexibles

/* Container des cards */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Cards individuelles */
.card {
  flex: 1 1 300px;
  background: white;
  border-radius: 8px;
  padding: 1rem;
}
🎯 Comportement :
  • • Base de 300px par card
  • • S'adapte automatiquement
  • • Retour à la ligne intelligent
Card 1
Card 2
Card 3

Propriété Gap : Espacement Intelligent

📏 La propriété gap

🎯 Qu'est-ce que gap ?

La propriété gap définit l'espace entre les éléments flex sans affecter les bords extérieurs. Plus besoin de jongler avec les margins !

📋 Syntaxes disponibles :
gap: 1rem; /* Même espacement partout */
gap: 1rem 2rem; /* row-gap column-gap */
row-gap: 1rem;
column-gap: 2rem;
✨ Avantages :
  • • Plus simple que les margins
  • • Pas d'espace en début/fin
  • • Fonctionne avec flex-wrap
  • • Compatible Grid et Flexbox

👀 Comparaison visuelle :

❌ Avec margin (problématique) :

Item 1
Item 2
Item 3
Espace indésirable à droite

✅ Avec gap (parfait) :

Item 1
Item 2
Item 3
Espacement parfait et régulier

🎮 Démonstration Interactive Gap

🎛️ Contrôles Gap :

📊 CSS généré :

display: flex; flex-direction: row; gap: 0;

🖼️ Résultat :

1
2
3
4
5

📐 Gap : Unités et Valeurs

📏 Unités absolues

gap: 10px; /* Pixels */
gap: 1cm; /* Centimètres */
gap: 12pt; /* Points */
A
B
C

gap: 10px

  • • Valeur fixe
  • • Pas de responsivité
  • • Contrôle précis

📱 Unités relatives

gap: 1rem; /* Root em */
gap: 2em; /* Element em */
gap: 5%; /* Pourcentage */
A
B
C

gap: 1rem

  • • S'adapte à la taille
  • • Responsive naturel
  • • Cohérence visuelle

📺 Unités viewport

gap: 2vw; /* Viewport width */
gap: 1vh; /* Viewport height */
gap: 1vmin; /* Plus petit */
A
B
C

gap: 2vw

  • • Relatif à l'écran
  • • Ultra responsive
  • • Design fluide

↔️ Gap Directionnel : row-gap & column-gap

🎯 Contrôle précis :

/* Espacement différencié */
.container {
display: flex;
flex-wrap: wrap;
row-gap: 2rem; /* Vertical */
column-gap: 1rem; /* Horizontal */
}

/* Équivalent raccourci */
gap: 2rem 1rem; /* row column */
💡 Cas d'usage :
  • • Grilles avec flex-wrap
  • • Cards responsive
  • • Formulaires multi-colonnes
  • • Galeries d'images

📱 Exemple avec wrap :

Container avec flex-wrap et gap différentiel :

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
gap: 1rem 0.5rem (vertical horizontal)
🎮 Testez :

🏗️ Exemples Pratiques avec Gap

🛠️ Barre d'outils :

.toolbar {
display: flex;
gap: 0.5rem;
padding: 0.75rem;
background: #f8f9fa;
}

Boutons parfaitement espacés

🏷️ Tags et Badges :

.tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
React CSS JavaScript Flexbox Responsive

Tags avec retour à la ligne automatique

Performance

Une seule propriété CSS au lieu de multiples margins

Maintenabilité

Changement global d'espacement en un endroit

Logique

Pas d'espacement sur les bords extérieurs

Exercices Pratiques

🏗️ Exercice 1 : Dashboard Admin

🎯 Objectif :

Créez un dashboard d'administration avec header, sidebar et grille de widgets.

📋 Spécifications :

  • • Header avec navigation horizontale
  • • Sidebar fixe de 250px
  • • Zone principale flexible
  • • Widgets en grille responsive
  • • Alignement parfait avec Flexbox

🚀 Aperçu :

Dashboard Admin Profile
Menu
Widget 1
Widget 2
Widget 3

🚀 Code de démarrage

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Admin - Exercice Flexbox</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; /* TODO: Ajouter display: flex et flex-direction */ } .header { background: #3498db; color: white; padding: 1rem; /* TODO: Faire une navigation horizontale avec flexbox */ } .main-layout { /* TODO: Container flex horizontal pour sidebar + contenu */ } .sidebar { background: #9b59b6; color: white; width: 250px; padding: 1rem; /* TODO: Faire un menu vertical avec flexbox */ } .content { flex: 1; padding: 1rem; } .widgets { /* TODO: Grille de widgets responsive avec flexbox */ } .widget { background: #ecf0f1; padding: 1rem; border-radius: 8px; min-height: 150px; /* TODO: Centrer le contenu */ } </style> </head> <body> <header class="header"> <div class="logo">Dashboard</div> <nav> <a href="#">Accueil</a> <a href="#">Utilisateurs</a> <a href="#">Paramètres</a> </nav> <div class="user-profile">Admin</div> </header> <div class="main-layout"> <aside class="sidebar"> <ul> <li><a href="#">Dashboard</a></li> <li><a href="#">Analytics</a></li> <li><a href="#">Rapports</a></li> <li><a href="#">Paramètres</a></li> </ul> </aside> <main class="content"> <h1>Tableau de bord</h1> <div class="widgets"> <div class="widget"> <h3>Utilisateurs</h3> <p>1,234</p> </div> <div class="widget"> <h3>Ventes</h3> <p>€12,345</p> </div> <div class="widget"> <h3>Commandes</h3> <p>567</p> </div> <div class="widget"> <h3>Performance</h3> <p>+15%</p> </div> </div> </main> </div> </body> </html>

Maîtrisez Flexbox ! 🚀

Vous avez maintenant les bases pour créer des layouts modernes et flexibles. Continuez à pratiquer avec des projets réels !

🎮 Plus d'Exercices 📚 CSS Grid 🏗️ Projets Avancés