Cell. +39 3479684755
Il Blog di Instant Websites
Testo su più colonne
La leggibilità di un testo in una pagina web dipende da più fattori tra i quali i più rilevanti sono il tipo e la dimensione del font usato e la lunghezza delle righe.
Su alcuni manuali, il numero di caratteri massimo che consente una lettura agevole è pari a 75; questo valore non deve essere interpretato in maniera stringente ma costituisce un valido riferimento.
Aprendo la pagina con gli esempi creati su questo argomento, possiamo vedere innanzitutto l’Esempio 1 nel quale un contenitore avente larghezza 100% contiene testo che risulta difficilissimo da leggere a causa della lunghezza eccessiva della riga.
Utilizzando le proprietà: column-count, column-width e column-gap è possibile suddividere su più colonne il testo in un div.
L’Esempio 2 mostra lo stesso contenitore al quale è stata applicata la proprietà column-count impostando il relativo valore a 3.
Naturalmente, tramite apposite media query sarà possibile modificare tale valore portando il testo su 2 colonne e poi su 1 sola colonna al ridursi della viewport.
Un’interessante proprietà di Flexbox
Abbiamo già parlato di Flexbox in due precedenti articoli: Introduzione a Flexbox (https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/) e Layout a 2 o più colonne con Flexbox (https://lnx.instantwebsites.it/iwblog/2021/05/layout-a-2-o-piu-colonne-con-flexbox/)
Vediamo ora un’interessante proprietà di Flexbox che riguarda il testo inserito in un box definito con flex.
Anche in questo caso, come negli altri articoli, è stato preparata una pagina HTML visualizzabile cliccando qui.
In quella pagina, abbiamo definito un box chiamato .contenitore e tre altri box al suo interno, identificati con la classe .box.
Quello che segue è il codice CSS:
.contenitore {
background: #FFF;
display: flex;
flex-direction: row;
column-gap: 30px;
}
.box {
width: 200px;
height: 200px;
background: #FF0;
display: flex;
justify-content: center;
}
.box p {
margin-top: auto;
}
Andando per ordine: al div.contenitore è stata assegnata la proprietà display: flex; ed i tre box al suo interno vengono disposti su una riga (flex-direction: row;) e separati da uno spazio pari a 30px (column-gap: 30px).
Layout a 2 o più colonne con Flexbox
Abbiamo esaminato in un precedente articolo le proprietà base di Flexbox, una delle novità introdotte con CSS3: https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/
Vedremo ora come utilizzare Flexbox per creare un layout composto a titolo di esempio da 3 colonne affiancate in un contenitore.
Tutti gli esempi che verranno creati possono essere visualizzati aprendo questa pagina e visualizzando il codice sorgente della stessa.
Definiamo un contenitore che identificheremo inizialmente con la classe .box avente sfondo blu e tre colonne che identificheremo con le classi .colonna1, .colonna2 e .colonna3.
Ognuna di queste ultime ha una larghezza di 300px ed ha sfondo colorato differenziato.
Nell’ESEMPIO N. 1, i div .colonna assumono il normale comportamento degli elementi a livello di blocco e si dispongono uno sopra all’altro.
Per affiancarli, potremmo adottare la tecnica basata su: display: table-cell, cambiando la natura di tali elementi (vedi questo articolo: https://lnx.instantwebsites.it/iwblog/2013/02/layout-a-piu-colonne-con-la-proprieta-display-table-cell/) ma usando Flexbox otterremo maggiore flessibilità, potendo anche ridisporre le colonne stesse in un ordine diverso da quello definito dal codice HTML.
Passiamo dunque all’ESEMPIO N. 2 nel quale al contenitore chiamato stavolta .box2 viene assegnata la proprietà display: flex;.
I tre elementi interni si dispongono uno di fianco all’altro, mantenendo le loro dimensioni se lo spazio è sufficiente e riducendole proporzionalmente quando la viewport assume una dimensione insufficiente (per verificare ciò, rimpicciolire la finestra del browser per simulare la viewport di dispositivi più piccoli).