Flexbox vs Grid

Deux systèmes de layout

CSS offre deux systèmes de layout puissants : Flexbox et CSS Grid. Les deux résolvent des problèmes de mise en page, mais de manière différente.

  Flexbox : layout UNIdimensionnel (ligne OU colonne)
  Grid :    layout BIdimensionnel (lignes ET colonnes)

  ┌─────────────┐     ┌──────┬──────┬──────┐
  │ A │ B │ C   │     │  A   │  B   │  C   │
  └─────────────┘     ├──────┼──────┼──────┤
  Ligne Flexbox       │  D   │  E   │  F   │
                      └──────┴──────┴──────┘
                      Grille (lignes & colonnes)

Forces de Flexbox

Flexbox excelle dans les layouts guidés par le contenu où la taille des éléments détermine la mise en page. Idéal pour les barres de navigation, le centrage et la distribution d'espace.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Forces de Grid

Grid excelle dans les designs guidés par la mise en page où vous définissez d'abord la structure puis placez les éléments dedans.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

Côte à côte

  Fonctionnalité    Flexbox         Grid
  ──────────────────────────────────────────
  Dimensions        1D              2D
  Guidé contenu     ✓ Excellent     Possible
  Guidé layout      Possible        ✓ Excellent
  Alignement        ✓ Deux axes     ✓ Deux axes
  Gap               ✓ gap           ✓ gap
  Zones nommées     ✗               ✓ grid-template-areas
  Chevauchement     Difficile       Facile
  Support navigat.  ✓ Tous modernes ✓ Tous modernes
  ──────────────────────────────────────────

Les combiner

Les meilleurs layouts combinent souvent les deux systèmes. Utilisez Grid pour la structure générale de la page, et Flexbox pour les layouts de composants individuels.

/* Layout page avec Grid */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
}

/* Navigation dans la sidebar avec Flexbox */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Résumé