Propriété CSS column-fill
La propriété column-fill définit si les colonnes sont remplies de manière uniforme ou séquentielle.
La propriété column-fill fait partie des propriétés CSS3.
Lorsqu'une hauteur est définie sur un conteneur multi-colonnes, vous pouvez contrôler la façon dont le contenu s'écoule dans les colonnes. Elle prend en charge deux valeurs : balance et auto. balance est la valeur par défaut et répartit le contenu de manière égale entre les colonnes. Avec auto, le contenu remplit les colonnes séquentiellement jusqu'à ce que la contrainte de hauteur soit atteinte.
| Valeur initiale | balance |
|---|---|
| S'applique à | Éléments multicol. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnFill = "balance"; |
Syntaxe
css
column-fill: auto | balance | balance-all | initial | inherit;Exemple de la propriété column-fill avec la valeur balance
html
<!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
Exemple de la propriété column-fill avec la valeur auto
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
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>Valeurs
| Valeur | Description |
|---|---|
| auto | Remplit les colonnes séquentiellement. |
| balance | Répartit également le contenu entre les colonnes. Dans les médias paginés, seule la dernière page est équilibrée. |
| balance-all | Répartit également le contenu entre les colonnes. Dans les médias paginés, toutes les pages sont équilibrées. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'column-fill' en CSS ?