column-fill
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.
La propriété CSS column-fill contrôle la manière dont le contenu d'un élément est équilibré lorsqu'il est réparti en colonnes.
Exemple interactif
column-fill: auto;
column-fill: balance;
<section id="default-example">
<p id="example-element">
Londres. Le trimestre de Michaelmas venait de se terminer, et le lord
chancelier siégeait dans la salle de Lincoln's Inn. Un novembre implacable.
</p>
</section>
#example-element {
width: 100%;
height: 90%;
columns: 3;
text-align: left;
}
Syntaxe
/* Valeurs avec un mot-clé */
column-fill: auto;
column-fill: balance;
/* Valeurs globales */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;
La propriété column-fill est définie par l'un des mots-clés listés ci-dessous. La valeur initiale est balance, de sorte que le contenu est équilibré entre les colonnes.
Valeurs
auto-
Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.
balance-
Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.
La spécification définit la valeur balance-all, dans laquelle le contenu est réparti également entre les colonnes dans des contextes fragmentés, tels que les médias paginés. Cette valeur n'est pas encore prise en charge par les navigateurs.
Définition formelle
| Valeur initiale | balance |
|---|---|
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
column-fill =
auto |
balance |
balance-all
Exemples
Équilibrer le contenu des colonnes
HTML
<p class="fill-auto">
Ce paragraphe remplit les colonnes une par une. Comme tout le texte tient dans
la première colonne, les autres restent vides.
</p>
<p class="fill-balance">
Ce paragraphe tente d'équilibrer la quantité de contenu dans chaque colonne.
</p>
CSS
p {
height: 7em;
background: #ffff99;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: auto;
}
p.fill-balance {
column-fill: balance;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # cf |
Compatibilité des navigateurs
Attention :
Il existe des problèmes d'interopérabilité et des bogues concernant column-fill entre les navigateurs, en raison de problèmes non résolus dans la spécification.
En particulier, lorsqu'on utilise column-fill: auto pour remplir les colonnes séquentiellement, Chrome ne prend en compte cette propriété que si le conteneur multi-colonne possède une taille dans la dimension de bloc (par exemple, la hauteur en mode d'écriture horizontal). Firefox prend toujours en compte cette propriété, il remplit donc la première colonne avec l'intégralité du contenu lorsque aucune taille n'est définie.
Voir aussi
- Apprendre : Mise en page à colonnes multiples
- La propriété
column-count - La propriété
column-width