Front-end · 6 mondes · 18 étapes

HTML & CSS

Structurer et styliser une page web, directement dans le navigateur.

Progression

0 %

0/18 étapes terminées

← Décryptages

Intermédiaire · 11 min de lecture

Flexbox et Grid

Un axe ou deux dimensions

1Définition

Flexbox distribue des éléments sur un axe : une rangée ou une colonne. Grid dispose des éléments sur une trame à deux dimensions, déclarée d'avance. Les deux se pilotent depuis le conteneur parent, et coexistent dans tous les projets.

2Principes fondamentaux

Le parent commande

display: flex ou display: grid se posent sur le conteneur ; les enfants directs obéissent.

Deux axes en Flexbox

justify-content sur l'axe principal, align-items sur l'axe secondaire. Changer flex-direction échange les deux.

fr en Grid

1fr est une part de l'espace restant : repeat(3, 1fr) fait trois colonnes égales sans calcul.

Le responsive sans media query

repeat(auto-fit, minmax(200px, 1fr)) et flex: 1 1 200px adaptent le nombre de colonnes à la place disponible.

3Exemples pratiques

La barre de navigation

Exemple

1.entete {2  display: flex;3  justify-content: space-between;4  align-items: center;5  gap: 16px;6  flex-wrap: wrap;7}

Logo à gauche, liens à droite, centrés en hauteur, et passage à la ligne s'il le faut : la recette de presque tous les en-têtes du web.

La galerie qui s'adapte seule

Exemple

1.galerie {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));4  gap: 16px;5}

Une colonne sur téléphone, quatre sur grand écran, et tout ce qu'il y a entre les deux — sans une seule media query.

4Erreurs courantes

display: flex sur les enfants

À éviter

.carte { display: flex; }   /* pour les aligner entre elles */

À faire

.grille { display: flex; }

Pourquoi : Flexbox organise les enfants du conteneur. Posé sur les cartes, il réorganise l'intérieur de chaque carte.

Confondre les axes

À éviter

justify-content: center;   /* pour centrer verticalement en row */

À faire

align-items: center;

Pourquoi : En row, l'axe vertical est l'axe secondaire : c'est align-items qui le gouverne.

Des marges entre éléments

À éviter

.carte { margin-right: 16px; }

À faire

.grille { gap: 16px; }

Pourquoi : La marge du dernier élément déborde et doit être annulée ; gap ne s'applique qu'entre les éléments.

5Subtilités à connaître

◆flex: 1 est un raccourci pour flex: 1 1 0% : grandir, rétrécir, en partant d'une base nulle — d'où des parts parfaitement égales.
◆place-items: center sur un conteneur grid centre dans les deux dimensions en une ligne.
◆auto-fit écrase les colonnes vides, auto-fill les conserve : la différence n'apparaît que lorsqu'il y a peu d'éléments.

6Vérifie ta compréhension

Question 1/3

Score 0

Où écrit-on display: flex ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.