CSS — Flexbox et responsive design

Section 11.1.11 : CSS — Flexbox et responsive design

🎯 Objectif pédagogique

Maîtriser Flexbox pour créer des layouts flexibles et le responsive design pour adapter votre site à tous les écrans. Vous serez capable de construire des mises en page modernes qui fonctionnent du mobile au desktop.

Le problème que Flexbox résout

Marc a essayé de mettre 3 cartes côte à côte. Il a essayé float: left (un vestige des années 2000), puis display: inline-block (presque, mais des espaces parasites). Puis il a découvert Flexbox — et tout est devenu simple.

Flexbox (Flexible Box Layout) est le système de mise en page CSS standard depuis 2020. Il gère la disposition des éléments dans une direction (horizontale ou verticale).

Flexbox : les bases

.container \{
  display: flex;           /* Active Flexbox */
  flex-direction: row;     /* Éléments en ligne (défaut) */
  /* flex-direction: column; → Éléments empilés */
  
  justify-content: center; /* Alignement horizontal */
  /* flex-start | center | flex-end | space-between | space-around | space-evenly */
  
  align-items: center;     /* Alignement vertical */
  /* flex-start | center | flex-end | stretch | baseline */
  
  gap: 1rem;               /* Espace entre les éléments */
  flex-wrap: wrap;          /* Retour à la ligne si nécessaire */
\}

Exemples pratiques

Navigation horizontale

nav \{
  display: flex;
  justify-content: space-between;  /* Logo à gauche, liens à droite */
  align-items: center;
  padding: 1rem 2rem;
\}

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

Grille de cartes

.cards-grid \{
  display: flex;
  flex-wrap: wrap;             /* Retour à la ligne */
  gap: 1.5rem;
  justify-content: center;
\}

.card \{
  flex: 1 1 300px;             /* Grandit, rétrécit, min 300px */
  max-width: 400px;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #E2DFD8;
\}

Centrage parfait (le classique)

.hero \{
  display: flex;
  justify-content: center;    /* Centre horizontalement */
  align-items: center;        /* Centre verticalement */
  min-height: 100vh;          /* Plein écran */
\}

Responsive Design

Un site responsive s'adapte à toutes les tailles d'écran :

Media Queries

/* Desktop first (par défaut) */
.cards-grid \{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
\}

.card \{
  flex: 1 1 300px;
\}

/* Tablette */
@media (max-width: 768px) \{
  .card \{
    flex: 1 1 100%;            /* Pleine largeur */
  \}
  
  nav \{
    flex-direction: column;    /* Menu empilé */
    gap: 0.5rem;
  \}
\}

/* Mobile */
@media (max-width: 480px) \{
  body \{
    font-size: 14px;
  \}
  
  h1 \{
    font-size: 1.8rem;
  \}
  
  section \{
    padding: 0 0.5rem;
  \}
\}

La meta viewport

Sans cette balise, votre page sera zoomée sur mobile :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Grid — Quand Flexbox ne suffit pas

Pour les layouts 2D (lignes ET colonnes), CSS Grid est plus puissant :

.dashboard \{
  display: grid;
  grid-template-columns: 250px 1fr 300px;  /* Sidebar | Main | Panel */
  grid-template-rows: 60px 1fr 50px;       /* Header | Content | Footer */
  gap: 1rem;
  min-height: 100vh;
\}

/* Grid responsive simple */
.gallery \{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
\}

🏋️ Exercice pratique (25 minutes)

Transformez votre portfolio en responsive :

1. →Ajoutez une section "Projets" avec 3 cartes Flexbox
2. →Centrez le hero section verticalement avec Flexbox
3. →Ajoutez des media queries pour mobile
4. →Testez en redimensionnant la fenêtre du navigateur
5. →Utilisez les DevTools → Toggle Device Toolbar (Ctrl+Shift+M) pour simuler un iPhone

/* Ajoutez à votre style.css */
.projects \{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
\}

.project-card \{
  flex: 1 1 280px;
  max-width: 350px;
  background: white;
  border: 1px solid #E2DFD8;
  border-radius: 12px;
  padding: 1.5rem;
\}

.project-card h3 \{ margin-bottom: 0.5rem; \}
.project-card p \{ color: #666; font-size: 0.9rem; \}

@media (max-width: 768px) \{
  .project-card \{ flex: 1 1 100%; max-width: none; \}
  nav \{ flex-direction: column; text-align: center; \}
\}