Addon · Flex

Deux axes. Trois mots-clés.

flex y empile verticalement. flex x aligne horizontalement. Ajoutez center, space, start — voilà l'API.

Vertical · flex y

Empile les enfants haut-vers-bas. Ajoutez g-{n} pour le gap, center pour l'alignement.

flex y g-12

flex y center g-12

flex y space

Aligne les enfants gauche-vers-droite. Mêmes modificateurs, axe différent.

flex x g-12

flex x center y center

flex x space y center

Direction

flex y    /* colonne */
flex x    /* ligne */
wrap      /* autorise le wrap */

Alignement

center    /* axe principal */
y center  /* axe transversal */
space     /* space-between */
start, end

Gap

g-4, g-8, g-12, g-16
g-20, g-32, g-52, g-84

Référence complète

Comportements de wrap, raccourcis d'alignement, utilitaires breakpoint. Tout ce dont une IA a besoin pour layouter en flex.