column-fill

La propriété column-fill permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec auto) et remplir l'espace nécessaire.

Syntaxe

/* Valeurs avec un mot-clé */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/* Valeurs globales */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

Cette propriété est définie grâce à l'un des mots-clés définis ci-après.

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.
balance-all
Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.

Syntaxe formelle

auto | balance | balance-all

Exemples

CSS

.exemple {
  border: 10px solid #000000;
  column-count:3;
  column-fill: balance;
}

HTML

<p class="exemple">
  « Mais alors, » pensa Alice, « ne serai-je donc
  jamais plus vieille que je ne le suis maintenant ?
  D’un côté cela aura ses avantages, ne jamais être
  une vieille femme. Mais alors avoir toujours des
  leçons à apprendre ! Oh, je n’aimerais pas cela du
  tout. »
  « Oh ! Alice, petite folle, » se répondit-elle. 
  « Comment pourriez-vous apprendre des leçons ici ?
  Il y a à peine de la place pour vous, et il n’y en
  a pas du tout pour vos livres de leçons. »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Multi-column Layout Module
La définition de 'column-fill' dans cette spécification.
Version de travail Définition initiale.
Valeur initialebalance
Applicabilitééléments sur plusieurs colonnes
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
column-fillChrome Support complet 50Edge Support complet 12Firefox Support complet 52
Support complet 52
Aucun support 13 — 74
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 10Opera Support complet 37Safari Support complet 9
Support complet 9
Support complet 8
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 50Chrome Android Support complet 50Firefox Android Support complet 52
Support complet 52
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 37Safari iOS Support complet 9
Support complet 9
Support complet 8
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 5.0
balance-all
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.