Propriété CSS column-fill
Utilisez la propriété CSS column-fill pour spécifier si les colonnes seront remplies de manière équilibrée. Valeurs et exemples.
La propriété column-fill contrôle la façon dont le contenu est réparti entre les colonnes d'une mise en page multicolonne — soit distribué uniformément sur toutes les colonnes, soit versé séquentiellement colonne par colonne.
Il s'agit de l'une des propriétés CSS3 qui fonctionne conjointement avec column-count et columns pour créer des mises en page de style journal.
Quand l'utiliser
column-fill n'a d'effet visible que lorsque le conteneur multicolonne possède une hauteur fixe (par exemple height: 200px). Sans limite de hauteur, le navigateur n'a aucune raison d'arrêter de remplir une colonne, de sorte que les deux valeurs se comportent de manière identique.
Il existe deux valeurs significatives :
balance(la valeur par défaut) tente de rendre chaque colonne à peu près de la même longueur, de sorte que le bloc de colonnes soit homogène et que le contenu se termine à peu près à la même ligne dans chacune. C'est généralement ce que vous souhaitez pour un texte lisible et de style journal.autoremplit la première colonne jusqu'à la hauteur totale du conteneur, puis passe à la suivante, et ainsi de suite. La dernière colonne peut être beaucoup plus courte que les autres. À utiliser lorsque l'ordre visuel des colonnes importe plus que l'équilibre.
| Valeur initiale | balance |
|---|---|
| S'applique à | Les éléments multicolonnes. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnFill = "balance"; |
Syntaxe
column-fill: auto | balance | balance-all | initial | inherit;Exemple de la propriété column-fill avec la valeur balance
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="balance">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Résultat
Avec balance, le texte est distribué de façon à ce que les quatre colonnes se terminent à peu près à la même hauteur.
Exemple de la propriété column-fill avec la valeur auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
height: 200px;
column-count: 3;
column-rule: 1px solid black;
column-fill: auto;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="auto">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Ici, le conteneur a une hauteur fixe height: 200px. Avec auto, la première colonne se remplit jusqu'à cette hauteur avant que le texte ne passe à la suivante, de sorte que les colonnes suivantes peuvent être plus courtes — voire vides si le texte est insuffisant.
Valeurs
| Valeur | Description |
|---|---|
| auto | Remplit les colonnes séquentiellement. |
| balance | Divise le contenu équitablement entre les colonnes. Dans les médias paginés, seule la dernière page est équilibrée. |
| balance-all | Divise le contenu équitablement entre les colonnes. Dans les médias paginés, toutes les pages sont équilibrées. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Prise en charge par les navigateurs
column-fill est pris en charge par tous les navigateurs modernes. Notez que balance-all dispose d'une prise en charge limitée, et dans de nombreux moteurs, auto se comporte comme balance à moins que le conteneur multicolonne ne soit fragmenté (par exemple, paginé ou doté d'une hauteur fixe).
Propriétés associées
column-count— définit le nombre de colonnes à créer.columns— raccourci pourcolumn-widthetcolumn-count.column-rule— trace une ligne entre les colonnes.