FlexBox

C’est ainsi qu’on définit un container flex : il est block par défaut ou inline selon la valeur donnée.
Cela crée un contexte flex pour tous les descendants directs.

---

Display

Table : Display

Propriété	Valeur	Description
display	flex	Génère un container flex de niveau block à l’intérieur de l’élément.
	inline-flex	Génère un container flex de niveau inline à l’intérieur de l’élément.

---

Flex-Direction

La propriété flex-direction établit l’axe principal du container.

Table : Flex-Direction

Valeur	Description
row	(par défaut) : de gauche à droite (ou droite à gauche si langue RTL).
row-reverse	Inverse le sens de row.
column	De haut en bas.
column-reverse	Comme column, mais du bas vers le haut.

---

Flex-Wrap

Définit si le container comprend une seule ligne ou plusieurs.

Table : Flex-Wrap

Valeur	Description
nowrap	(par défaut) Une seule ligne, pouvant déborder du contenant.
wrap	Multi-lignes, retour automatique à la ligne.
wrap-reverse	Multi-lignes inversées (bas vers haut ou droite vers gauche).

---

Flex-Flow

Raccourci combinant flex-direction et flex-wrap.

Par défaut : row nowrap.

---

Justify-Content

Définit l’alignement le long de l’axe principal.

Table : Justify-Content

Valeur	Description
flex-start	(par défaut) Items regroupés au début de la ligne.
flex-end	Items regroupés en fin de ligne.
center	Items centrés sur la ligne.
space-between	Répartition sur toute la ligne (1er au start, dernier à l’end).
space-around	Espacement égal autour de chaque item.

---

Align-Items

Aligne les items le long de l’axe secondaire (cross-axis).

Table : Align-Items

Valeur	Description
flex-start	Aligné au début de l’axe secondaire.
flex-end	Aligné à la fin de l’axe secondaire.
center	Centré sur l’axe secondaire.
baseline	Alignement sur la ligne de base du texte.
stretch	(par défaut) Étire les items pour remplir le container.

---

Align-Content

Aligne les lignes d’un container flex lorsqu’il y a plusieurs lignes.
⚠️ Sans effet si le container n’a qu’une seule ligne.

---

Gap

La propriété gap définit les espaces entre les items.

---

Order

Contrôle l’ordre d’affichage des items flex indépendamment du DOM.

---

Flex-Grow

Définit la capacité d’un item à grandir.

---

Flex-Shrink

Définit la capacité d’un item à rétrécir.

---

Flex-Basis

Définit la taille initiale d’un élément avant distribution de l’espace.

---

Align-Self

Permet à un item individuel d’écraser la valeur de align-items.

---

À retenir

• display: flex → crée un conteneur flexible.
• flex-direction → axe principal (row/column).
• flex-wrap → retour à la ligne.
• justify-content → aligne sur l’axe principal.
• align-items → aligne sur l’axe secondaire.
• align-self → surchage l’alignement d’un item.
• flex-grow, flex-shrink, flex-basis → contrôlent la répartition de l’espace.
• gap → préférable à margin pour gérer les espacements.
• order → change l’ordre visuel sans toucher au DOM.