Flexbox est unidimensionnel : le conteneur choisit un axe principal et l’axe transversal lui est perpendiculaire. Avec row, l’axe principal suit l’écriture en ligne ; avec column, le flux de bloc. Ce choix change le rôle visible de justify-content et align-items : nommez d’abord l’axe au lieu de mémoriser horizontal et vertical.
Répartissez sur l’axe principal
justify-content place le groupe lorsqu’il reste de l’espace positif. flex-start et flex-end tassent vers un bord, center partage le reste et space-* le répartit entre ou autour des éléments. Ces valeurs ne fixent pas les largeurs : grow, basis, contenu intrinsèque et conteneur sont résolus d’abord. Alternez row et column pour voir la règle suivre l’axe.
Distinguez éléments et lignes retournées
align-items place les éléments dans chaque ligne sur l’axe transversal ; align-self le remplace pour un enfant. align-content répartit les lignes entières et n’agit pas avec nowrap sur une seule ligne. Pour l’observer, choisissez wrap, donnez des basis créant plusieurs lignes et laissez de l’espace transversal. Gap sépare lignes et colonnes voisines sans ajouter de marge au bord.
Vérifiez le vrai composant
FlexWeave rend le modèle visuel validé avec le navigateur courant, mais ignore votre contenu, mode d’écriture, contrôles focalisables et largeurs prises en charge. Intégrez les règles au composant, gardez un ordre HTML cohérent et testez faible largeur, zoom, traductions longues, clavier et technologies d’assistance. Direction inversée et order ne prouvent jamais une bonne séquence de lecture. Conservez CSS et HTML sous gestion de versions, car la capsule ne garde aucun projet.