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

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.

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.

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.

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).

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.