HTML CSS JS

Flexbox est le système de mise en page CSS le plus utilisé au quotidien. Avant Flexbox, centrer un élément verticalement en CSS était un cauchemar. Aujourd'hui, 3 lignes suffisent.

Le concept — conteneur et items

Flexbox fonctionne sur un modèle parent/enfants :

• Le conteneur flex (parent) : l'élément sur lequel vous appliquez display: flex
• Les items flex (enfants directs) : les éléments à l'intérieur, qui se positionnent automatiquement

Quand vous activez display: flex sur un parent, ses enfants directs se placent côte à côte horizontalement au lieu de s'empiler verticalement.

Les 2 axes

Flexbox travaille sur 2 axes perpendiculaires :

• Axe principal (main axis) — horizontal par défaut (gauche → droite)
• Axe secondaire (cross axis) — vertical par défaut (haut → bas)

Cette distinction est cruciale car :

• justify-content aligne sur l'axe principal
• align-items aligne sur l'axe secondaire

Si flex-direction est row (défaut) : justify-content = horizontal, align-items = vertical. Si flex-direction est column : justify-content = vertical, align-items = horizontal.

Les propriétés du conteneur (parent)

display: flex — Active Flexbox sur ce conteneur.

flex-direction — La direction de l'axe principal :

• row (défaut) — les items sont côte à côte horizontalement
• column — les items sont empilés verticalement
• row-reverse / column-reverse — inversent l'ordre

justify-content — Comment distribuer les items sur l'axe principal :

• flex-start (défaut) — tous collés au début
• center — tous centrés
• flex-end — tous collés à la fin
• space-between — premier au début, dernier à la fin, espace égal entre
• space-around — espace égal autour de chaque item
• space-evenly — espace strictement égal partout

align-items — Comment aligner les items sur l'axe secondaire :

• stretch (défaut) — les items s'étirent pour remplir la hauteur
• center — centrés verticalement
• flex-start — alignés en haut
• flex-end — alignés en bas

flex-wrap — Les items passent-ils à la ligne quand il n'y a plus de place ?

• nowrap (défaut) — tout sur une ligne, les items rétrécissent
• wrap — les items passent à la ligne suivante

gap — L'espace entre les items. Plus propre que d'ajouter des marges sur chaque item. Exemple : gap: 1.5rem crée 1.5rem d'espace entre chaque item.

Les propriétés des items (enfants)

flex: 1 — L'item prend tout l'espace disponible. Si 3 items ont flex: 1, ils partagent l'espace en 3 parts égales.

flex-grow: 1 — L'item peut grandir pour remplir l'espace libre.

flex-shrink: 0 — L'item refuse de rétrécir. Utile pour une image ou un logo qui doit garder sa taille.

flex-basis: 300px — La taille de base de l'item avant que grow/shrink ne s'appliquent.

align-self — Override l'alignement du parent pour cet item seul. Un item centré pendant que les autres sont en haut.

Le pattern le plus utile — centrer n'importe quoi

display: flex; justify-content: center; align-items: center;

Ces 3 lignes centrent n'importe quel contenu, horizontalement ET verticalement. Mémorisez-les.

Flexbox vs Grid

• Flexbox = layout en 1 dimension (une ligne OU une colonne)
• Grid = layout en 2 dimensions (lignes ET colonnes)

En pratique, vous utilisez les deux : Grid pour la structure macro (grille de page), Flexbox pour les composants (navigation, carte, formulaire).

> Attention : gap fonctionne avec Flexbox dans tous les navigateurs modernes. C'est beaucoup plus propre que d'ajouter des margin sur chaque item.