column-fill |
Remplir la colonne |
| CSS3 |
|
Syntaxe
|
column-fill: auto|balance|initial|inherit;
|
Paramètres
| Paramètre |
Description |
| auto |
Ce paramètre permet d'indiquer que les colonnes sont remplis séquentiellement et avec des longueurs différentes. |
| balance |
Ce paramètre permet d'indiquer que les colonnes sont balancés. C'est la valeur par défaut. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer comment remplir les colonnes, les balancés ou non.
Remarques
- Définition et rôle : La propriété column-fill contrôle la manière dont le contenu est distribué entre les colonnes lorsqu'on utilise le modèle multi-colonnes.
Elle détermine si les colonnes doivent être équilibrées en hauteur ou si elles doivent remplir l'espace disponible de manière séquentielle.
- Valeurs principales : Les deux valeurs les plus courantes sont balance et auto. Avec balance, le contenu est réparti uniformément entre les colonnes pour qu'elles
aient des hauteurs similaires. Avec auto, le contenu remplit chaque colonne en entier avant de passer à la suivante.
- Valeur par défaut : La valeur par défaut de column-fill est balance. Cela signifie que les navigateurs essaient, par défaut, de répartir le contenu de
manière égale entre les colonnes pour une présentation visuellement harmonieuse.
- Compatibilité avec la hauteur : Lorsque column-fill est utilisé avec une hauteur fixe pour l'élément (définie via height), la valeur auto garantit
que les colonnes respectent cette contrainte, tandis que balance peut entraîner un comportement imprévisible si le contenu ne tient pas dans la hauteur spécifiée.
- Effet visuel : La propriété column-fill peut avoir un impact significatif sur l'apparence des colonnes. Par exemple, avec auto, la dernière colonne pourrait
être beaucoup plus courte que les autres si le contenu n'est pas suffisant pour remplir toutes les colonnes uniformément.
- Scénarios d'utilisation : column-fill: balance est idéal pour des designs esthétiques comme des magazines ou journaux, où les colonnes doivent être
alignées visuellement. En revanche, auto convient mieux aux contenus séquentiels, comme des articles de blog où la lisibilité prime.
- Compatibilité des navigateurs Web : Bien que largement pris en charge par les navigateurs Web modernes, certains navigateurs plus anciens peuvent ne pas
implémenter complètement cette propriété ou la gérer différemment.
- Interaction avec d'autres propriétés multi-colonnes : La propriété column-fill fonctionne bien avec column-count, column-width, et column-gap.
Par exemple, si column-count est fixé à un nombre élevé et que column-fill: auto est utilisé, les colonnes pourraient sembler déséquilibrées.
Dernière mise à jour : Dimanche, le 20 décembre 2015
