Remplissage de colonne - Astuces CSS

Table des matières

Lorsque vous ajoutez de la hauteur à un élément à plusieurs colonnes, vous pouvez contrôler la façon dont le contenu remplit les colonnes. Le contenu peut être équilibré ou rempli de manière séquentielle.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Cette propriété n'est disponible que dans Firefox. Firefox équilibrera automatiquement le contenu dans une mise en page multi-colonnes contrainte par la hauteur. Les autres navigateurs rempliront toujours les colonnes de manière séquentielle lorsqu'ils seront soumis à une contrainte de hauteur.

Pour que Firefox se comporte comme les autres navigateurs, c'est-à-dire pour remplir les colonnes de manière séquentielle, vous pouvez définir column-fill: auto.

Valeurs

column-fillaccepte les valeurs de mot-clé balanceet auto.

balanceremplira chaque colonne avec environ la même quantité de contenu, mais ne permettra pas aux colonnes de devenir plus hautes que le height. Vous constaterez peut-être que les colonnes seront plus courtes que le heightcar le navigateur distribue le contenu uniformément horizontalement.

autoremplira chaque colonne jusqu'à ce qu'elle atteigne le heightet faites cela jusqu'à ce qu'elle soit à court de contenu. Compte tenu du contenu, cette valeur ne remplira pas nécessairement toutes les colonnes ni ne les remplira uniformément.

C'est un peu comme verser du jus dans des verres. Vous pouvez verser une quantité égale de jus dans chaque verre et constater que vous ne remplissez pas chaque verre vers le haut ( balance). Vous pouvez également remplir un verre jusqu'au sommet jusqu'à ce qu'il soit plein et répéter jusqu'à ce qu'il ne reste plus de jus. En conséquence, les verres restants peuvent contenir moins ou pas de jus ( auto).

Voir l'exemple de remplissage de colonne Pen (CSS-Tricks) par CSS-Tricks (@ css-tricks) sur CodePen.

Prise en charge du navigateur

Les column-fillvaleurs des mots clés fonctionnent spécifiquement dans Firefox. Ils n'ont pas fonctionné en août 2014 lorsque cette entrée Almanac a été écrite à l'origine, mais le fait lors d'un nouveau test en août 2015 (Chrome 44). Au cours de ces tests, il semble que changer la valeur de manière dynamique ne prendrait pas, vous avez dû forcer un relais.

Prise en charge du navigateur pour la mise en page multi-colonnes en général: