Se sei arrivato fino a qui leggendo le nostre guide sul linguaggio HTML, ricorderai senz’ altro che alcuni elementi di cui abbiamo parlato hanno comportamento bloccante: come già spiegato, questo vuol dire che i browser aggiungono automaticamente una riga vuota prima e dopo ogni elemento del genere, tale per cui l’effetto sortito è l’ “andare a capo”.
Ci sono, però, anche elementi inline grazie ai quali puoi affiancare un elemento all’altro scavalcando il limite del comportamento bloccante.
Agli elementi bloccanti – così li definiremo – possiamo attribuire delle dimensioni custom. Occuperanno, quindi, tutto lo spazio di cui hanno bisogno in verticale e tutta la riga in orizzontale.
Gli elementi inline, di contro, occuperanno solo lo spazio richiesto dal loro contenuto.
Esiste, tuttavia, una proprietà CSS che permette di modificare questi comportamenti di default.
Stiamo parlando della proprietà “display”.
La proprietà display CSS
La proprietà display ci permette di controllare la maniera in cui il nostro browser renderizza l’elemento in termini di spazio. È una proprietà che tutti gli elementi html hanno, e accetta i seguenti valori (che cercheremo di spiegare nella maniera più semplice possibile):
- block: fa in modo che il nostro elemento occupi tutto lo spazio della pagina in orizzontale e perciò, come dicevamo parlando di alcuni elementi, fa “andare a capo”. Verticalmente, invece, l’elemento occuperà soltanto lo spazio dell’ elemento.
Questo è il valore di default di diversi elementi html, quali ad esempio i tag <div> e i tag <p>, così come, anche, i vari tag <h>.
Tips utili!
Se imposti una width al tuo contenuto dando
ai margin dell’asse x valore “auto”, otterrai che il contenuto venga perfettamente centrato. Questo succede solo nel caso in cui il valore della proprietà “display” sia “block”.
- inline: è il valore di default di elementi come, ad esempio, <span>, <b>, <strong> o <em>.
Quando il valore della proprietà “display” è “inline” l’elemento occuperà solo ed esclusivamente lo spazio del contenuto, sia verticalmente che orizzontalmente: anche provando ad impostare un valore di width o di height differenti, non cambierà nulla. L’ unica proprietà su cui accetta, invece, modifiche è il margin orizzontale.
- inline-block: permette all’elemento di occupare lo spazio che stabiliamo debba occupare, in base al contenuto, ai valori di width e a quelli di height che gli diamo. Sarà possibile, dunque, che due elementi si posizionino uno accanto all’altro.
- none: rende il contenuto invisibile e non gli fa occupare alcuno spazio.
- flex: il valore più importante della proprietà display nel CSS, grazie al quale l’elemento in questione potrà godere dei vantaggi del modello del FLEXBOX.
Flexbox CSS: il display flex CSS
Il flexbox, o flexible box, è un modello che permette di creare layout, anche complessi, in maniera pulita, rapida e responsive.
Cosa vuol dire responsive?
Ricordi quando abbiamo parlato della viewport? L’avevamo definita come la grandezza visibile della nostra pagina web, che cambia al cambiare del dispositivo di fruizione del sito.
Un sito web, infatti, è navigabile da diversi dispositivi: da pc, da tablet e da cellulare.
Quando consultiamo un sito web utilizzando un computer, parliamo di navigazione “da desktop”; se, invece, per farlo utilizziamo un cellulare, parleremo di navigazione “da mobile”.
Capisci bene che, prendendo in analisi tutti questi dispositivi, la prima cosa che noteremo sarà che le dimensioni del loro schermo differiscono notevolmente l’una dall’altra. Questo implica, ovviamente, una diversa disposizione degli elementi del tuo sito web.
Intuisci dove vogliamo andare a parare? Esatto!
Dovrai creare dei layout diversi a seconda dello schermo del dispositivo da cui il tuo sito web verrà visitato.
Al giorno d’oggi il maggior traffico sui siti web avviene da cellulare: prova a pensare anche alla tua esperienza personale e ti renderai conto di quanto spesso consulti un sito web usando il tuo telefono e di quante volte, invece, utilizzi il tuo computer.
Questo avviene perché il cellulare è perennemente a portata di mano, anche quando siamo lontani da casa, e sicuramente ne usufruiamo in maniera maggiore.
Ti abbiamo portato a rifletterci non a caso:
è fondamentale, infatti, che quando progetti il layout del tuo sito web tu lo concepisca “mobile-first”.
Questo vuol dire che il tuo sito deve essere, innanzitutto, impeccabilmente fruibile da mobile e, via via, adatterai la progettazione anche alle dimensioni degli schermi più grandi.
Quando un sito è perfettamente fruibile da qualsiasi schermo, e, dunque, anche da mobile si definisce “responsive”, caratteristica imprescindibile di un sito web che si rispetti.
È possibile riuscire a soddisfare questi criteri proprio grazie all’aiuto del flexbox. Vediamo come.
Per utilizzare il flexbox devi creare nel tuo foglio CSS una classe .flex-container e darle, appunto, la proprietà “display: flex”.
Immagina di avere, nell’ html, un <div> al quale assegni proprio la classe .flex-container appena creata: da questo momento, tutti gli elementi figli di questa classe diventeranno a loro volta flessibili e potranno sfruttare le potenzialità del flexbox.
Il flexbox, dunque, crea una sorta di contenitore in cui, automaticamente, gli elementi saranno disposti l’uno accanto all’altro, e saranno compressi se sono tanti.
Ci sono, però, delle proprietà che ci permettono di disporre questi elementi nel modo che più ci piace:
- flex-wrap: accetta come valori “wrap” e “nowrap”.
“wrap” ci consente di non far comprimere gli elementi nel flexbox e di andare a capo una volta esaurito lo spazio utile;
“nowrap” è il valore di default, che, invece, comprime gli elementi se non c’è lo spazio necessario. Quando gli elementi sono davvero troppi, e non entrano neppure comprimendosi, il flexbox viene rotto e gli elementi straborderanno dalla pagina, dando vita ad un effetto di scroll orizzontale.
- flex-direction: ci permette di definire la direzione con la quale ordinare gli elementi. Accetta 4 valori:
- row: “riga”, è quello di default); dispone gli elementi da sinistra a destra in orizzontale, in ordine crescente dal primo figlio all’ultimo
- row-reverse: come il precedente, dispone gli elementi sempre in orizzontale ma, questa volta, da destra a sinistra
- column: dispone gli elementi in verticale, dall’ alto verso il basso, in ordine crescente, dal primo figlio all’ ultimo
- column-reverse: dispone gli elementi in verticale, ma dal basso verso l’alto
- Justify-content: allinea gli elementi in orizzontale all’ interno del flex-container in modi diversi a seconda del valore dato. I valori che accetta sono:
- center: per allineare l’elemento al centro
- flex-start: il valore di default, giustifica gli elementi a sinistra
- flex-end: giustifica gli elementi a destra
- space-between: dispone il primo elemento all’estrema sinistra e l’ultimo all’estrema destra (sui bordi) e poi li spazia tra di loro in maniera uguale
- space-around: dispone gli elementi dando loro lo stesso spazio a sinistra e a destra (anche ai due elementi estremi che,quindi, non si troveranno sui bordi); questo spazio tra un elemento e l’altro non si sovrappone, ma si somma
- space-evenly: dispone gli elementi spaziati tra di loro in maniera uguale
- Align-items: allinea gli elementi in verticale all’interno del flex-container a seconda del valore dato; accetta i seguenti valori:
- center: allinea gli elementi al centro verticalmente all’interno del mio flex-container. Puoi decidere di dare a quest’ ultimo una “height: 100vh”, così da centrare gli elementi perfettamente al centro della pagina (perchè il flex-container sarà diventato esso stesso grande quanto la pagina; infatti, il flex-container si estende orizzontalmente e verticalmente solo per la grandezza del suo contenuto)
- flex-start: il valore di default, allinea gli elementi in alto
- flex-end: ovviamente, allineerà gli elementi in basso
nb. quando utilizziamo flex-direction: column al posto di flex-direction: row le proprietà align-items e justify-content si invertono: align-items gestirà lo spazio in orizzontale e justify content quello in verticale.
