Proprietà CSS column-fill
Usa la proprietà CSS column-fill per specificare se le colonne saranno riempite in modo bilanciato o meno. Valori: balance. Prova gli esempi.
La proprietà column-fill controlla come il contenuto viene distribuito tra le colonne di un layout multi-colonna — sia distribuito uniformemente su tutte le colonne, sia versato sequenzialmente in una colonna alla volta.
È una delle proprietà CSS3 e funziona insieme a column-count e columns per costruire layout in stile giornalistico.
Quando usarla
column-fill ha un effetto visibile solo quando il contenitore multi-colonna ha un'altezza fissa (ad esempio height: 200px). Senza un limite di altezza il browser non ha motivo di smettere di riempire una colonna, quindi entrambi i valori appaiono identici.
Ci sono due valori significativi:
balance(il valore predefinito) cerca di rendere ogni colonna approssimativamente della stessa lunghezza, in modo che il blocco di colonne risulti uniforme e il contenuto termini circa alla stessa riga in ciascuna. Questo è quello che si vuole di solito per un testo leggibile in stile giornalistico.autoriempie la prima colonna fino all'altezza piena del contenitore, poi passa alla successiva, e così via. L'ultima colonna potrebbe essere molto più corta delle altre. Usalo quando l'ordine visivo delle colonne è più importante del bilanciamento.
| Valore iniziale | balance |
|---|---|
| Si applica a | Elementi multicolonna. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columnFill = "balance"; |
Sintassi
column-fill: auto | balance | balance-all | initial | inherit;Esempio della proprietà column-fill con il valore balance
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="balance">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Risultato
Con balance, il testo viene distribuito in modo che tutte e quattro le colonne terminino all'incirca alla stessa altezza.
Esempio della proprietà column-fill con il valore auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
height: 200px;
column-count: 3;
column-rule: 1px solid black;
column-fill: auto;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="auto">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Qui il contenitore ha un'altezza fissa height: 200px. Con auto, la prima colonna si riempie fino a quell'altezza prima che il testo scorra nella successiva, quindi le colonne successive potrebbero essere più corte — o vuote se il testo si esaurisce.
Valori
| Valore | Descrizione |
|---|---|
| auto | Riempie le colonne in modo sequenziale. |
| balance | Divide il contenuto equamente tra le colonne. Nei media impaginati, solo l'ultima pagina è bilanciata. |
| balance-all | Divide il contenuto equamente tra le colonne. Nei media impaginati, tutte le pagine sono bilanciate. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Supporto browser
column-fill è supportata in tutti i browser moderni. Nota che balance-all ha un supporto limitato, e in molti motori auto si comporta come balance a meno che il contenitore multi-colonna non sia frammentato (ad esempio, impaginato o con altezza fissa).
Proprietà correlate
column-count— imposta il numero di colonne da creare.columns— abbreviazione percolumn-widthecolumn-count.column-rule— disegna una linea tra le colonne.