Flexbox et Grid sont deux modèles de layout CSS. Flexbox pour les alignements en une dimension (ligne ou colonne), Grid pour les grilles en deux dimensions. Combinaison et fallbacks pour des maquettes modernes.
Flexbox (display: flex) gère l'alignement et la répartition dans une direction (row ou column). Idéal pour les barres d'outils, les cartes horizontales, les footers. Grid (display: grid) définit des lignes et colonnes : layouts de page, grilles de cartes, zones nommées. On combine souvent les deux : Grid pour la structure de page, Flexbox pour les composants à l'intérieur des cellules. Les fallbacks (display: block, float ou inline-block) restent utiles pour les vieux navigateurs si nécessaire.
Conseil : Grid pour les layouts 2D, Flexbox pour les composants 1D et l'alignement fin.
Points forts / Points faibles
Points forts (Flexbox)
- Alignement et répartition en 1D
- Support excellent, simple à apprendre
Points forts (Grid)
- Layouts 2D, zones nommées, subgrid
- Code intentionnel pour les pages
Points faibles
- Deux modèles à maîtriser
- Compatibilité anciens navigateurs (Grid plus récent)