Flexbox

Aligner et distribuer des éléments sur un axe

Section 1

Conteneur flex

Step 1

Activer Flexbox

Flexbox s'active sur le conteneur parent. Les enfants directs deviennent automatiquement des flex items. L'axe principal est horizontal par défaut.

snippet.css

css

1.container {
2  display: flex;
3  flex-direction: row;     /* row | column | row-reverse | column-reverse */
4  flex-wrap: wrap;         /* nowrap | wrap | wrap-reverse */
5  gap: 1rem;               /* espace entre les items */
6}
7
8/* Raccourci */
9.container {
10  display: flex;
11  flex-flow: row wrap;     /* flex-direction + flex-wrap */
12  gap: 1rem;
13}

Step 2

Aligner sur l'axe principal

justify-content contrôle la distribution des items sur l'axe principal (horizontal si flex-direction: row).

Step 3

Aligner sur l'axe transversal

align-items contrôle l'alignement sur l'axe perpendiculaire (vertical si flex-direction: row).

snippet.css

css

1.container {
2  display: flex;
3  flex-direction: row;     /* row | column | row-reverse | column-reverse */
4  flex-wrap: wrap;         /* nowrap | wrap | wrap-reverse */
5  gap: 1rem;               /* espace entre les items */
6}
7
8/* Raccourci */
9.container {
10  display: flex;
11  flex-flow: row wrap;     /* flex-direction + flex-wrap */
12  gap: 1rem;
13}

Section 2

Items flex

Step 4

Flex-grow, shrink, basis

Ces trois propriétés contrôlent comment chaque item occupe l'espace disponible. C'est le cœur de la flexibilité.

Step 5

Cas pratiques

Flexbox excelle pour les patterns de layout récurrents. Ces patterns couvrent 80% des besoins.

snippet.css

css

1.container {
2  display: flex;
3  flex-direction: row;     /* row | column | row-reverse | column-reverse */
4  flex-wrap: wrap;         /* nowrap | wrap | wrap-reverse */
5  gap: 1rem;               /* espace entre les items */
6}
7
8/* Raccourci */
9.container {
10  display: flex;
11  flex-flow: row wrap;     /* flex-direction + flex-wrap */
12  gap: 1rem;
13}

Topics and skills covered

CSS Flexbox
Mise en page
Alignement

Sélecteurs, cascade et spécificité

Ch.2

CSS Grid — Mise en page bidimensionnelle

Ch.2