Cell. +39 3479684755
Il Blog di Instant Websites
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).
Il tag picture
L’introduzione del web design reattivo tramite HTML5 e CSS3 ha introdotto la possibilità di ottenere il ridimensionamento automatico di un’immagine, fino ad occupare lo spazio orizzontale disponibile e mantenendone le proporzioni, tramite la regola:
img { max-width: 100%; height: auto; }
Fino a qui, niente di nuovo; d’altronde, quella sopra esposta è una regola che compare sistematicamente nel foglio di stile base di qualsiasi sito.
Ci sono però dei casi nei quali la semplice reattività di un’immagine non si traduce in un risultato apprezzabile dal punto di vista pratico.
Immaginiamo un’immagine di intestazione che, vista nella viewport di uno schermo ampio, occupa tutta la larghezza ed una certa altezza, ad es. 1920×850 pixel.
Nel momento in cui la viewport viene ridotta e l’immagine ridimensionata proporzionalmente, quest’ultima finirà con il risultare estremamente piccola e quindi inutile dal punto di vista del risultato. Eseguendo i classici “conticini” scolastici, si fa in fretta a capire: nella viewport di uno smartphone, 1920×850 diventa 480×213 pixel.
Per prevenire questo problema, una soluzione tradizionale consiste nel posizionare l’immagine non come elemento <img> bensì come sfondo del contenitore; man mano che la viewport viene ridotta, tale contenitore occupa sempre il 100% dello spazio disponibile ed una certa altezza minima mentre l’immagine di sfondo non si adatta, sicché ne verrà mostrata solo una parte.
Potete vedere un esempio di questa tecnica nella homepage del sito https://ottolina.com/ (grafica del sito by modus comunicazione visiva).
Si tratta di una tecnica funzionale ma con un possibile effetto sgradito: verrà mostrata solo una parte dell’immagine – tipicamente quella centrale – sicché si perderanno molti dettagli della stessa.
E’ indispensabile quindi scegliere un’immagine che mantenga un effetto accettabile anche in tale contesto.
Da menzionare, senza però raccomandarla, un’alternativa molto comoda ma, per così dire, estrema: rinunciare del tutto a mostrare l’immagine stessa quando la viewport scende al di sotto di una certa dimensione.
Esiste una terza possibilità che è finalizzata ad ottimizzare l’esperienza utente al prezzo di una preventiva preparazione di due o più immagini alternative: il tag picture di HTML5.