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.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.
Syntaxes 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
; column-fill:inherit
; column-fill:revert
; column-fill:revert-layer
; column-fill:unset
;La valeur initiale est :
.balance
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 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.
Exemple interactif avec column-fill
.
La hauteur du bloc de démonstration a été fixée. le simulateur ne modifie que la propriété column-fill
.
Prise en charge par les navigateurs (compatibilité).
column-fill
.
column-fill
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que column-fill
.
Les spécifications CSS éditées par le W3C sont organisées en modules. column-fill
fait partie du Module CSS - Mise en page multi-colonnes (CSS Multi-column Layout Module). Les définitions suivantes sont également décrites dans ce même module.