Flexbox et Grid : les mises en page modernes

Objectifs

À la fin de cette leçon, vous saurez :

• distribuer et aligner des éléments avec Flexbox, axe principal et axe secondaire compris ;
• construire des grilles avec Grid — colonnes, zones de page ;
• choisir entre les deux selon la mise en page visée, et les combiner.

🔗 Pour vous rafraîchir la mémoire : le box model et l'affichage

Avant : le bricolage. Depuis : deux outils

Historique éclair pour mesurer votre chance : avant Flexbox (2015) et Grid (2017), aligner verticalement un élément au centre d'une boîte exigeait des astuces obscures (tableaux détournés, marges négatives calculées en dur). Ces deux modules CSS ont transformé la mise en page en déclarations lisibles. Ils sont aujourd'hui supportés partout — ce sont LES outils de layout, sans exception.

Flexbox : une rangée ou une colonne

Le principe : un conteneur flex distribue ses enfants sur UN axe (horizontal par défaut).

.menu {
  display: flex;                    /* active le contexte flex */
  gap: 16px;                        /* espace entre les éléments */
  justify-content: space-between;   /* répartition sur l'axe PRINCIPAL (ici horizontal) */
  align-items: center;              /* alignement sur l'axe SECONDAIRE (ici vertical) */
}

La clé de lecture de toute Flexbox : distinguer les DEUX AXES. Par défaut (flex-direction: row) :

axe principal → → →        (justify-content agit ICI : horizontal)
axe secondaire ↓           (align-items agit ICI : vertical)

Inversez avec flex-direction: column et les rôles s'échangent : justify-content devient vertical ! La moitié des confusions flexbox viennent de cet oubli. Réflexe : identifiez toujours la direction avant de choisir la propriété.

Les valeurs courantes de justify-content :

flex-start | center | space-between | space-around | flex-end
    ↑ collé      ↑ centré     ↑ espacé aux extrémités

Les trois recettes du quotidien

Centrer parfaitement n'importe quoi — le problème légendaire devenu trois lignes :

.centre {
  display: flex;
  justify-content: center;   /* horizontalement */
  align-items: center;       /* verticalement */
  min-height: 100vh;
}

Barre de navigation horizontale :

nav { display: flex; gap: 24px; }

Colonne d'articles espacés :

main { display: flex; flex-direction: column; gap: 32px; }

Qui grossit ? flex: 1 sur les enfants

Par défaut, les enfants flex gardent leur taille naturelle. flex: 1 dit à un enfant : « prends ta part de l'espace restant » :

.barre {
  display: flex;
  gap: 8px;
}
.contenu { flex: 1; }     /* absorbe tout l'espace libre */
.sidebar { width: 200px; } /* reste fixe */

C'est le mécanisme des layouts « sidebar + contenu qui remplit » — sans une seule largeur en pourcentage.

Grid : deux dimensions à la fois

Flexbox distribue sur un axe ; Grid dessine lignes ET colonnes :

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 colonnes ÉGALES */
  gap: 16px;
}

fr (fraction) = part de l'espace libre. repeat(3, 1fr) se lit « trois parts égales » — plus jamais de maths en pourcentages ni de débordements d'arrondi. Variantes utiles :

grid-template-columns: 200px 1fr;          /* colonne fixe + colonne fluide */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
/* grille SANS media queries : autant de colonnes de ≥240px que possible,
   qui se replient automatiquement — magique pour les galeries */

Le gabarit de page nommé

Grid excelle à poser le plan complet d'une page :

body {
  display: grid;
  grid-template-areas:
    "header header"
    "menu   contenu";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

header { grid-area: header; }
nav    { grid-area: menu; }
main   { grid-area: contenu; }

Chaque région est NOMMÉE dans le gabarit ASCII — la disposition se lit comme un dessin. Réorganiser la page devient réécrire le schéma de zones, pas repositionner chaque élément.

Comment choisir — et pourquoi pas les deux

Une direction (ligne OU colonne), alignements, barres, boutons  → FLEXBOX
Deux dimensions, galeries, gabarits de page                     → GRID

Ils ne sont pas concurrents mais complémentaires : Grid pose la page, Flexbox habille chaque région. Exemple type : body en Grid (header/menu/contenu), puis main en Flex column pour espacer les sections, puis chaque carte en Flex pour centrer son contenu.

Exercice

1. Passez la nav de votre CV en flexbox horizontale avec gap.
2. Mettez « Compétences » et « Expériences » côte à côte dans une grille 1fr 1fr.
3. Centrez verticalement ET horizontalement le contenu du header.
4. Expérience : dans votre nav flex, ajoutez flex-direction: column puis testez align-items: center — constatez l'inversion des axes.
5. Remplacez vos media queries de galerie par repeat(auto-fit, minmax(240px, 1fr)) : redimensionnez la fenêtre et observez le repli automatique des colonnes.

Résumé

• Flexbox = distribution UNIDIRECTIONNELLE ; identifier axe principal vs secondaire avant toute propriété.
• flex: 1 = « prends ta part du reste » ; gap espace sans marges.
• Grid = gabarit BIDIMENSIONNEL ; fr et minmax/auto-fit remplacent tous les calculs.
• Page en Grid, régions en Flex : les deux outils se combinent naturellement.

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}