CSS Layout : Flexbox et Grid

35 min Cours SNT

Pourquoi le layout CSS ?

Le layout (mise en page) permet d'organiser les elements d'une page web. Avant Flexbox et Grid, on utilisait des techniques compliquees (float, tables). Aujourd'hui, ces deux outils modernes rendent la mise en page simple et puissante.

Flexbox

Pour les mises en page 1 dimension : ligne OU colonne. Parfait pour les navbars, cartes, centrage.

CSS Grid

Pour les mises en page 2 dimensions : lignes ET colonnes. Parfait pour les layouts complexes.

Flexbox : les bases

Demo interactive

flex-direction

justify-content

flexbox.css

.conteneur {
  display: flex;
  flex-direction: row;       /* ou column */
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertical */
  gap: 20px;                 /* espacement */
}

.element {
  flex: 1;  /* prend l'espace disponible */
}

Proprietes principales

display: flexActive Flexbox sur le conteneur

flex-directionrow | column - direction des elements

justify-contentAlignement horizontal (axe principal)

align-itemsAlignement vertical (axe secondaire)

flex-wrapRetour a la ligne si debordement

gapEspacement entre les elements

flex-growCapacite a grandir

flex-shrinkCapacite a retrecir

flex-basisTaille de base

Bleu = sur le conteneur parent | Vert = sur les elements enfants

CSS Grid : les bases

Exemple de grille 3 colonnes

4 (2 colonnes)

grid.css

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 colonnes egales */
  grid-template-rows: auto;
  gap: 20px;
}

.element-large {
  grid-column: span 2;  /* occupe 2 colonnes */
}

L'unite "fr" (fraction)

fr divise l'espace disponible en fractions :

1fr 1fr 1fr = 3 colonnes egales (33% chacune)
1fr 2fr = 2 colonnes (33% et 66%)
200px 1fr = sidebar fixe + contenu flexible

Exemple pratique : Navigation responsive

MonSite

AccueilA proposContact

navbar.css

/* Navigation responsive avec Flexbox */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

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

/* Sur mobile */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
}

Flexbox vs Grid : Lequel choisir ?

Utilisez Flexbox pour :

Barres de navigation
Centrer un element
Alignement en ligne ou colonne
Cartes flexibles

Utilisez Grid pour :

Layouts de pages completes
Galeries d'images
Tableaux de bord
Grilles complexes 2D

Astuce : Vous pouvez combiner les deux ! Grid pour le layout global, Flexbox pour les composants internes.

Quiz : Teste tes connaissances

5 questions pour verifier ce que tu as appris sur Flexbox et Grid

A retenir

Flexbox = layout 1D (ligne ou colonne)
CSS Grid = layout 2D (lignes et colonnes)
justify-content = axe principal, align-items = axe secondaire
L'unite fr divise l'espace disponible en fractions

CSS Bases Cours suivant : Formulaires HTML