L'alignement des boîtes avec une disposition en colonnes
Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons 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.
Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.
Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.
align-content et justify-content
La propriété align-content s'applique à l'axe de bloc et la propriété justify-content s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété column-gap.
Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de column-width, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.
column-gap
La propriété column-gap a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.
On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.