Flexbox et Grid : les mises en page modernes

Objectifs

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

• aligner et répartir des éléments avec Flexbox ;
• construire une grille avec Grid ;
• choisir entre les deux selon la mise en page visée.

Flexbox : une rangée ou une colonne

Le principe : un conteneur flex distribue ses enfants sur un axe.

.menu {
  display: flex;
  gap: 16px;              /* espace entre les éléments */
  justify-content: space-between;   /* répartition sur l'axe principal */
  align-items: center;    /* alignement sur l'axe secondaire */
}

Cas d'usage immédiats :

/* centrer parfaitement n'importe quoi */
.centre {
  display: flex;
  justify-content: center;
  align-items: center;
  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;
}

La propriété flex sur les enfants contrôle qui grossit :

.contenu { flex: 1; }    /* prend tout l'espace restant */

Grid : deux dimensions

Quand il faut lignes et colonnes :

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

1fr = une fraction de l'espace libre. Trois cartes, trois colonnes, largeurs toujours égales — sans calcul de pixels.

Grille de page complète :

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

Comment choisir

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

Ils se combinent : grid pour la page, flexbox à l'intérieur des régions.

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.

Résumé

• Flexbox = distribution unidirectionnelle ; Grid = gabarit bidimensionnel.
• gap, justify-content, align-items couvrent l'essentiel.
• fr remplace les maths de pourcentages.

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}