Column-fill - Propriété CSS
Résumé des caractéristiques de la propriété column-fill
balance
| auto
| balance-all
balance
column-fill
passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de column-fill
.
column-fill
.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description de la propriété column-fill
.
column-fill
définit comment se fera la répartition du contenu entre les colonnes.
La première solution est de passer à une colonne suivante lorsque la colonne actuelle est pleine,
la dernière colonne pouvant alors être plus courte que les autres.
La deuxième solution est d'équilibrer au mieux la hauteur de chacune des colonnes.
D'autres contraintes peuvent influer sur la hauteur des colonnes. Ce sont par exemples des sauts de colonne
forcés avec les propriétés break-before
et break-after
.
Les propriétés widows
et orphans
qui évitent que des lignes de texte se retrouvent isolées
en haut ou en bas d'une colonne, influencent également la taille des colonnes.
Valeurs pour column-fill
.
- column-fill: auto;
Le navigateur remplit les colonnes les unes à la suite des autres, en passant à une nouvelle colonne lorsque la colonne en cours est pleine. Cela suppose que la hauteur des colonnes soit fixée (
height
).
Le remplissage des colonnes sera inégal et les dernières colonnes peuvent même être vides. - column-fill: balance;
Valeur par défaut. Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes.
- column-fill: balance-all; ⚠
Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes. La différence avec la valeur précédente n'apparaît que dans une restitution fragmentée, comme une impression (fragmentation par pages).
- column-fill: initial; (
balance
) column-fill: inherit; column-fill: revert; column-fill: revertLayer; column-fill: unset;Les valeurs communes sont présentées sur ces pages :
initial
,inherit
,revert
,revert-layer
,unset
.
Exemple d'animation de column-fill
.
L'animation de la propriété column-fill
est possible mais d'un intérêt limité.
De plus cela risque de générer des calculs assez lourds.
column-fill
.
Pour les besoins de la démonstration, celle-ci a été animée.
Afin de ne pas gêner l'équilibrage des colonnes, les propriétés orphans
et widows
ont
été fixées à leur valeur minimale, c'est à dire 1
.Vous pouvez consulter le CSS de l'animation, ainsi que les règles appliquées à cet élément en cliquant sur le bouton ci-dessus.
Exemples d'utilisation de la propriété column-fill
.
La hauteur du bloc de démonstration a été fixée. le simulateur ne modifie que la propriété column-fill
.
Compatibilité des navigateurs avec column-fill
.
column-fill
pour définir à quel moment on passe à la colonne suivante.Remarques :
(1) Ne supporte pas les valeurs avoid
(dans le contexte d'une mise en page multi-colonnes), avoid-column
et avoid-page
pour les propriétés beak-after
, break-before
et break-inside
.
(2) Ne supporte pas les valeurs break-after
, break-before
et break-inside
.
multi colonnes
column-fill
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini
Histoire de la propriété column-fill
.
-
Module CSS - Mise en page multi-colonnes - Niveau 1
Première description des mises en page sur plusieurs colonnes.
Description des propriétés qui se rapportent au multi-colonnage, dontcolumn-fill
.23 Juin 1999Document de travail.17 Décembre 2009Candidat à la recommandation.
Voir aussi, à propos des mises en page en colonnes.
Les mises en page en colonnes sont décrites dans la spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes).
La propriété column-fill
est expliquée dans ce module. Vous y trouverez également la référence des termes ci-dessous :