Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété column-fill

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 position des changements de colonnes.

Syntaxes pour column-fill.

  • 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: 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: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

La hauteur du bloc de démonstration a été fixée. le simulateur ne modifie que la propriété column-fill.

column-fill :
Extrait du livre de Daniel Glazman - "CSS2, des feuilles de styles pour le Web", décembre 1998 : « Netscape retarde considérablement le développement des feuilles de styles sur le web en diffusant en 1996 ses extensions propriétaires d’HTML ; elles offrent la gestion de la couleur, de la fonte ou même du clignotement (…) Netscape prône la simplicité : les rédacteurs de documents HTML maîtrisent ce format car il est simple ; il suffit donc d’intégrer aux documents de nouveaux éléments HTML simples gérant la présentation. »

Voir aussi...

Colonnes multiples - Propriétés.

  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • column-count : Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
  • column-gap : Définit l'espacement entre les colonnes.
  • column-rule : Définit tous les paramètres du trait de séparation entre les colonnes.
  • column-rule-color : Définit la couleur des lignes de séparation de colonnes.
  • column-rule-style : Choisit le type de trait pour la séparation des colonnes.
  • column-rule-width : Définit l'épaisseur du trait de séparation entre les colonnes.
  • column-span : Gère le chevauchement du contenu sur plusieurs colonnes.
  • column-width : Définit la largeur des colonnes.
  • columns : Définit les caractéristiques d'une mise en page sur plusieurs colonnes.
  • orphans : Gestion des coupures en bas de page.
  • widows : Gestion des ruptures en haut de page.