Cell. +39 3479684755
Il Blog di Instant Websites
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).
Layout a più colonne con la proprietà display: table-cell
La tecnica più impiegata per costruire un layout a due o più colonne utilizzando i CSS è sicuramente quella che si basa sulla proprietà float assegnata ai box che costituiscono le colonne.
Questa tecnica è anche definita metodo delle faux columns poiché, nel momento in cui le colonne devono avere colori di sfondo differenti, è sufficiente rendere flottante anche il box contenitore delle colonne ed assegnargli un’immagine di sfondo che, appunto, disegna le colonne rendendole in apparenza eguali in altezza.
In effetti, un box flottante risulta alto quanto basta a contenere il suo contenuto ma il box contenitore, essendo a sua volta flottante, conterrà entrambe le colonne per intero e la ripetizione sull’asse Y dell’immagine di sfondo garantisce che le colonne risultino – apparentemente – alte uguali: da qui, la denominazione di “finte colonne”.
Questa tecnica è consolidata da tempo e risulta compatibile con tutti i browser, recenti e meno recenti (attenzione ai bug di IE6 e precedenti ma questi browser sono considerati obsoleti e quindi non più supportati).
Una tecnica emergente è quella che si basa sulla dichiarazione display: table-cell applicata ai box che compongono le colonne.