CSS - Propriété column-fill
Description de la propriété column-fill
.
column-fill
définit comment se fera la répartition du contenu entre les colonnes.
La première solution est de passer à une colonne suivante lorsque la colonne actuelle est pleine,
la dernière colonne pouvant alors être plus courte que les autres.
La deuxième solution est d'équilibrer au mieux la hauteur de chacune des colonnes.
D'autres contraintes peuvent influer sur la hauteur des colonnes. Ce sont par exemples des sauts de colonne
forcés avec les propriétés break-before
et break-after
.
Les propriétés widows
et orphans
qui évitent que des lignes de texte se retrouvent isolées
en haut ou en bas d'une colonne, influencent également la position des changements de colonnes.
Syntaxes pour column-fill
.
column-fill: balance;
Valeur par défaut. Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes.
column-fill: auto;
Le navigateur remplit les colonnes les unes à la suite des autres, en passant à une nouvelle colonne lorsque la colonne en cours est pleine. Cela suppose que la hauteur des colonnes soit fixée (
height
).
Le remplissage des colonnes sera inégal et les dernières colonnes peuvent même être vides.-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
La hauteur du bloc de démonstration a été fixée. le simulateur ne modifie que la propriété column-fill
.
column-fill
:
Voir aussi...
Colonnes multiples - Propriétés.
break-after
: Interdit ou impose des sauts (page, colonne...) après l'élément.break-before
: Interdit ou impose des sauts (page, colonne...) avant l'élément.break-inside
: Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.column-count
: Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.column-gap
: Définit l'espacement entre les colonnes.column-rule
: Définit tous les paramètres du trait de séparation entre les colonnes.column-rule-color
: Définit la couleur des lignes de séparation de colonnes.column-rule-style
: Choisit le type de trait pour la séparation des colonnes.column-rule-width
: Définit l'épaisseur du trait de séparation entre les colonnes.column-span
: Gère le chevauchement du contenu sur plusieurs colonnes.column-width
: Définit la largeur des colonnes.columns
: Définit les caractéristiques d'une mise en page sur plusieurs colonnes.orphans
: Gestion des coupures en bas de page.widows
: Gestion des ruptures en haut de page.