L'alignement des boîtes avec une disposition en multi-colonnes
Le module d'alignement des boîtes CSS détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous voyons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
Dans la disposition multi-colonnes, le conteneur d'alignement est la boîte de contenu du conteneur multi-colonnes. Le sujet d'alignement est la boîte de colonne. Les propriétés qui s'appliquent aux dispositions multi-colonnes sont détaillées ci-dessous.
align-content et justify-content
La propriété align-content s'applique à l'axe de bloc et justify-content à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie est ajouté entre les colonnes, ce qui peut rendre les gouttières plus larges que celles définies par la propriété column-gap (ou le raccourci gap).
L'utilisation d'une valeur de justify-content autre que normal ou stretch entraîne l'affichage des boîtes de colonne à la column-width définie sur le conteneur multi-colonnes, et l'espace restant est réparti selon la valeur de justify-content.
column-gap
La propriété column-gap a été initialement définie dans la spécification de la disposition multi-colonnes, puis unifiée avec les propriétés d'espacement pour d'autres méthodes de disposition dans le module d'alignement des boîtes. Alors que d'autres méthodes de disposition traitent la valeur initiale de column-gap comme 0, la disposition multi-colonnes la traite comme 1em — vous voulez généralement un espace entre les colonnes.