Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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éCSScolumn-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> <p> 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 estbalance, de sorte que le contenu est équilibré entre les colonnes.
Valeurs
autoUn mot-clé indiquant que les colonnes sont remplies dans l'ordre.
balanceUn 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 valeurbalance-all, dans laquelle le contenu est réparti également entre les colonnes dans des contextes fragmentés, tels queles 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 défini |
| Type d'animation | discrète |
Syntaxe formelle
column-fill =
auto|
balance|
balance-all
Exemples
Équilibrer le contenu des colonnes
HTML
<p> Ce paragraphe remplit les colonnes une par une. Comme tout le texte tient dans la première colonne, les autres restent vides.</p><p> 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 concernantcolumn-fill entre les navigateurs, en raison de problèmes non résolus dans la spécification.
En particulier, lorsqu'on utilisecolumn-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