Prima di iniziare a spiegare il comportamento della proprietà flex
mi sembra doveroso fare un veloce chikeyarimento.
Se conosci bene i CSS saprai benissimo la differenza che sussiste tra un valore ed una proprietà, ma siccome non posso leggerti nella mente e non posso dare per scontato queste conoscenze, sfrutterò i prossimi paragrafi nel tentativo di chiarirti al meglio questi concetti.
Se ritieni che non ne hai bisogno e preferisci saltare questa breve introduzione puoi farlo tranquillamente saltando al titolo La Struttura di Base dove ti presenterò la struttura HTML che utilizzeremo in questo corso ed il relativo repository presente su GitHub.
Nella scorsa lezione hai già incontrato la parola flex
e molto probabilmente potrai aver pensato che in questa si parli principalmente della stessa cosa, ma non è affatto così.
Nella scorsa lezione abbiamo utilizzato la parola chiave flex
come valore della proprietà display
mentre in questa (come forse avrai già intuito) ci riferiremo a questa come proprietà.
In CSS le proprietà sono delle strutture che ci permettono di identificare e personalizzare un singolo aspetto dell’elemento selezionato (ti rimando alla lezione Aggiungiamo un po’ di Stile del corso Fondamenti di Web Design), e proprio per modificare questo aspetto hanno bisogno di un valore; ebbene la proprietà flex
ne accetta addirittura 3:
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
Proprio come succede per la proprietà background
(o font
per quel che riguarda), anche la proprietà flex
si comporta come una scorciatoia che con una sola riga di codice ci permette di inserirne un numero arbitrario.
Ecco la struttura che ci accompagnerà in questo percorso
Come spesso accade quando andiamo a scoprire del nuovo codice, partire da qualcosa che conosciamo già è rassicurante e di aiuto, se vai a controllare il repository GitHub di questo corso potrai trovare l’intera pagina index.html
anche se nelle nostre lezioni ci concentreremo principalmente soltanto sulla sezione che ci interessa.
Soltanto alla fine andremo a consultare l’intera struttura HTML con gli esempi proposti per la creazione di una pagina web completa.
<section id="container"> <div class="ele ele1">Elemento 1</div> <div class="ele ele2">Elemento 2</div> <div class="ele ele3">Elemento 3</div> <div class="ele ele4">Elemento 4</div> </section>
Come puoi notare tu stesso, la struttura che ho scelto per questo corso è veramente semplice!
Si parla di un classico elemento <section>
che contiene al suo interno una serie di <div>
, differenziati ciascuno da una diversa classe.
Anche se ti consiglio di consultare il video per vedere come si trasforma il codice CSS di partenza, ho deciso comunque di inserirlo all’interno di questa lezione, giusto per farti capire da dove iniziamo 😉
body{ width: 80%; margin: 0 auto; } /* Elemento Contenitore */ #container{ background-color: #ddd; min-height: 300px; } /* Elementi Contenuti */ .ele{ padding: 10px; } .ele1{ background-color: red; } .ele2{ background-color: yellow; } .ele3{ background-color: green; } .ele4{ background-color: blue; }
Come puoi vedere tu stesso, il codice utilizzato è, ancora una volta, molto semplice.
Le singole classi CSS che distinguono i vari div
sono state utilizzate soltanto per dare un colore di sfondo ai singoli elementi in modo da poter avere un feedback visivo sullo spazio occupato da questi.
Oltre a questo ho sfruttato la classe .ele
(anche se avrei potuto usare tranquillamente il selettore div
) per dare un po’ di padding
a tutti i nostri elementi.
Adesso che conosci la struttura con la quale inizieremo a giocare non ci resta altro che iniziare con i nostri primi esperimenti.
Inizia il divertimento con display
All’inizio di questa lezione ho cercato di farti capire la differenza tra il valore flex
e la proprietà che porta lo stesso nome, ma nella scorsa ti ho anche ricordato che quando andiamo ad utilizzare il modulo FlexBox ci sono due famiglie di proprietà ben distinte: troviamo quelle dedicate al contenitore (nel nostro caso rappresentato da section
) e quelle dedicate ai singoli elementi (ovvero i nostri div.ele
).
Ebbene, una cosa che ho tralasciato, è il fatto che anche la proprietà display
subisce queste variazioni, facciamo subito qualche esempio pratico.
Nello stato di default qualsiasi elemento div
viene considerato dai nostri browser come un elemento che ha la proprietà display: block;
, un blocco quindi. Se vai a vedere come viene creata la pagina index.html
nel tuo browser troverai un risultato simile a questo:

Come c’era da aspettarsi i nostri elementi blocco si dispongono uno sotto all’altro ed andranno ad occupare tutta la larghezza del suo contenitore, che da CSS è stata impostata all’80% della larghezza della finestra stessa. Ma il comportamento risulta molto diverso se andiamo a modificare la proprietà display
ci questi stessi elementi, andiamo a vederla da vicino.
.ele{ padding: 10px; display: inline; }
Dichiarando la proprietà display: inline
si ottiene questo strano risultato (non lasciarti ingannare perché è dovuto al padding
😉 ):

Mentre se andiamo ad impostare per questi elementi la dichiarazione inline-block
il risultato è leggermente diverso; prima guardiamo il codice:
.ele{ padding: 10px; display: inline-block; }
E adesso l’immagine d’esempio:

Come puoi notare, in qualsiasi situazione i nostri elementi occupano soltanto l’area del contenuto.
Come ben sai con gli elementi block
e inline-block
ti sarà possibile anche specificare delle dimensioni (cosa che non potrai fare con gli inline
) ma comunque sia per far questo dovrai affidarti a delle unità di misura che non sempre si comportano bene e che sopratutto non ci aiutano a lavorare tranquillamente con i margin
ed i padding
; questo perché dovrai stare sempre attento ai valori che andrai ad utilizzare.
Con FlexBox il discorso è completamente diverso e a breve andremo a scoprire come lasciare al browser il compito di calcolare la larghezza dei nostri elementi, ma prima di poter far questo dobbiamo fare una piccola modifica…
Per prima cosa rimuovi la proprietà display
dagli elementi; a questo punto sarai tornato al punto di partenza dove i vari div
occupano tutta la larghezza del contenitore.
A questo punto quello che devi fare è dire al tuo browser che deve trattare gli elementi contenuti in #container
come fossero elementi flex
. Ecco come fare in codice:
#container{ background-color: #ddd; min-height: 300px; display: flex; }
Come puoi notare tu stesso, al posto di modificare la proprietà display
sul singolo elemento, come abbiamo fatto precedentemente; adesso andremo a modificarla all’interno del contenitore, in questo modo possiamo modificare gli elementi contenuti ottenendo il risultato mostrato nella figura seguente.

Anche se la larghezza dei nostri elementi è sempre dipendente dal loro contenuto, puoi notare tu stesso che adesso l’altezza si è modificata automaticamente per rispecchiare quella del suo contenitore. Soltanto questa caratteristica avrebbe dovuto farti saltare dalla seggiola…
Ricordi quanto era difficile fare due colonne della stessa altezza con i float
? Adesso fa tutto da solo!!
Alla scoperta della proprietà flex
Fino ad ora non abbiamo fatto altro che riprendere alcuni concetti presentati nella lezione precedente ed abbiamo fatto qualche esempio su come si modifica il comportamento degli elementi contenuti quando il contenitore viene impostato a display: flex
.
Adesso è giunto il momento di scoprire da vicino la proprietà flex
che ti sarà incredibilmente utile per personalizzare la disposizione dei vari elementi.
Riprendiamo per un momento la sua dichiarazione:
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
Come già detto precedentemente, questa funziona come una proprietà scorciatoia, ovvero al suo interno vengono definite le seguenti proprietà:
flex-grow
– che ci permetterà di gestire il fattore crescita dei singoli elementi;flex-shrink
– che invece ci permetterà di gestire il fattore riduzione dei singoli elementi;flex-basis
– con questa invece avrai la possibilità di dichiarara una larghezza desiderata per il singolo elemento.
Elencate in questo modo sembrano tutte e tre delle proprietà incredibilmente semplici, ed una volta compreso il loro funzionamento ti assicuro che lo saranno veramente, ma è proprio questo quello che manca in questo breve elenco, una completa descrizione delle singole proprietà.
Iniziamo subito con il dire che a differenza della proprietà display: flex
, la scorciatoia flex
dovrà essere dichiarata per l’elemento contenuto da quello al quale abbiamo dichiarato quest’ultima; per farla breve ed utilizzando il codice di esempio che ti ho presentato precedentemente, questa proprietà dovrà essere dichiarata per tutti gli elementi .ele
.
Ma a questo punto raggiungiamo un altro limite, qual è la sintassi di questa regola?
Cerchiamo di arrivare passo passo alla risposta a questa domanda andando ad analizzare una per una le regole che flex
include al suo interno.
La larghezza naturale con flex-basis
Anche se tra poco scoprirai che per utilizzare FlexBox non avrai bisogno di dichiarare le larghezze dei tuoi elementi, per dovere di cronaca (ed anche perché ci sarà utile quando andremo a scoprire la proprietà flex-shrink
) preferisco presentarti per prima la proprietà flex-basis
, quella che sarà in grado di farti definire la larghezza naturale dei tuoi elementi flex.
Ti stai chiedendo perché sto facendo riferimento al termine larghezza naturale?
Ebbene lo sto dicendo perché sarai in grado di dichiarare la larghezza di un elemento, ma questa successivamente si adatterà a seconda dei valori che utilizzeremo con flex-grow
e flex-shrink
. Ma non briciamo le tappe ed andiamo a vedere come potrai dichiarare questa proprietà:
.ele{ flex-basis: 20%; }
Ovviamente la proprietà flex-basis
è in grado di accettare qualsiasi unità di misura ma dato che il nostro contenitore è stato definito in percentuale non mi sembrava carino dichiarare a questo la larghezza degli elementi in pixel 😉
Grazie a questa proprietà abbiamo dichiarato che ogni elemento dovrà avere una larghezza del 20% rispetto a quella del suo contenitore, se la matematica non è un’opinione, essendo 4 elementi dovrebbe avanzare un po’ di spazio, non credi?

Come puoi notare tu stesso, alla desta dell’ultimo elemento è presente una piccola area grigia, lo stesso grigio del nostro contenitore; sono pronto a scommettere che la larghezza di quello spazio è pari al 20% 😀
Hai detto flex-grow
?
Ebbene sì, ho proprio detto flex-grow
la proprietà che ti permetterà di definire il fattore di crescita del singolo elemento.
Forse per capire al meglio il significato di questa funzione è necessario partire da un esempio classico, apri il tuo editor di testo (se ancora non lo avessi fatto) e scrivi quanto segue:
.ele{ flex-basis: 20%; flex-grow: 1; }
Se adesso provi ad aggiornare il browser ti troverai di fronte qualcosa del genere:

Certo, avremmo potuto anche inserire un text-align: center;
per rendere le cose più carine; ma lasciamo le lezioni di stile per un’altro corso; in questo siamo già abbastanza impegnati a scoprire come funziona FlexBox.
Con questo primo esempio il mio intento era proprio quello di farti capire che grazie alla regola flex-grow
sarai in grado di far crescere automaticamente i tuoi elementi in modo da poter riempire l’area delineata dall’elemento contenitore. Hai forse visto delle percentuali o dei pixel a giro per il CSS in grado di far crescere questi elementi? Non credo proprio.
E questa è una delle prime cose interessanti che avrai a tua disposizione utilizzando FlexBox: non dovrai preoccuparti delle dimensioni dei tuoi elementi; hai detto nulla 😉
Per quanto tempo ti sei letteralmente picchiato con le percentuali alla ricerca di trovare la perfetta combinazione tra larghezza, padding
e margin
per far entrare quel bottone che ti piaceva tanto?!?
Oppure hai sempre scaricato del codice già pronto?
Qualunque sia la risposta a queste domande, adesso se qua per imparare, quindi vediamo di proseguire…
Avere tutti gli elementi che si allineano uno di fianco all’altro in completa armonia è sicuramente un risultato soddisfacente, sopratutto se ti dico che potrai giocare con margin
e padding
come meglio credi. Ma questo ci pone di fronte anche un interrogativo: come fare se voglio che gli elementi abbiano delle dimensioni diverse?
Ebbene anche in questo contesto la logica FlexBox ci viene in aiuto. Ricordi quando ti ho detto che grazie a questa proprietà potrai definire il fattore crescita dei singoli elementi, non stavo affatto scherzando!
Se hai notato, la proprietà flex-grow
non accetta alcuna unità di misura e questo è perché non ne ha assolutamente bisogno.
Facciamo subito un esempio pratico, diciamo che desideri avere il secondo elemento 2 volte più grande rispetto agli altri, vediamo un po’ che cosa succede quando inseriamo il seguente codice:
.ele{ flex-basis: 20%; } .ele1{ background-color: red; flex-grow: 1; } .ele2{ background-color: yellow; flex-grow: 2; } .ele3{ background-color: green; flex-grow: 1; } .ele4{ background-color: blue; flex-grow: 1; }
Prima di aggiornare la pagina del tuo browser vorrei che tu controlli per bene il codice che ti ho appena mostrato, se presti attenzione ti sarai sicuramente accorto che dal selettore .ele
è stata rimossa la proprietà flex-grow
, mentre è stata aggiunta a tutti gli elementi (e a quello con classe .ele2
è stato addirittura raddioppiato il valore).
A questo punto tutto sta ad indicare che l’elemento con sfondo giallo dovrebbe essere di larghezza doppia rispetto al resto, prova adesso ad aggiornare il browser per vedere se questo è vero:

Forse ad un primo sguardo (sbagliato) potrebbe sembrare che l’area colorata di giallo sia il doppio rispetto alle altre, ma faresti un grosso errore. Se provi a controllare le misure che il browser ha calcolato noterai chiaramente che l’elemento con sfondo giallo non è assolutamente due volte più grande rispetto agli altri.
Sono convinto che ti stai chiedendo perché…
Ebbene il motivo risiede proprio nel termine inglese utilizzato per dichiarare questa proprietà, il termine grow
.
In inglese questo significa crescita e non è necessariamente legato alla crescita rispetto agli altri elementi ma piuttosto questo definisce quanto un elemento può crescere rispetto agli altri prendendo come riferimento il valore impostato per la proprietà flex-basis
.
Cerco di spiegarmi meglio, hai notato che tutti gli elementi contenuti in #container
(quelli con classe .ele
) hanno un flex-basis
impostato al 20%; ebbene questa (come abbiamo già detto) è la larghezza naturale, quella che l’elemento può occuprare in una situazione classica. Quando andiamo ad utilizzare flex-grow
questa controlla lo spazio che avanza al contenitore degli elementi e lo distribuisce a seconda delle proporzioni indicate.
Con il precedente e complicato discorso, ho cercato di farti capire che se ad un elemento imposto un valore doppio rispetto agli altri flex-grow
impostati per gli altri elementi questo non significa che sarà due volte più grande rispetto ad i suoi fratelli, ma che piuttosto potrà crescere il doppio. Quindi se avanzano 100px
ed ho 4 elementi di cui uno di questi può crescere il doppio rispetto agli altri, questo potrà crescere di 40px
al posto di 20px
.
Capisco che al momento questo concetto potrà sembrarti un po’ strano, per questo ti consiglio di guardare il video allegato alla lezione per vedere un paio di esempi pratici che ho preparato appositamente.
Il discorso fondamentale è che con la proprietà flex-grow
sarai in grado di dichiarare il già citato fattore di crescita che, in rapporto agli altri elementi contenuti, ti permetterà di dichiarare un elemento più grande rispetto agli altri considerando soltanto i pixel che restano a disposizione dopo aver preso in considerazione il valore impostato per flex-basis
.
Strizza tutto con flex-shrink
Adesso che hai scoperto quale sia la proprietà che grazie a FlexBox ti permetterà di impostare il fattore di crescita dei tuoi elementi è giunto il momento di scoprire il fattore di riduzione che ti permetterà di adattarli quando il valore di flex-basis
risulta più alto delle dimensioni del contenuto.
In poche parole questa proprietà lavora in modo simile alla precedente flex-shrink
, perché basa le sue modifiche sul valore della proprietà flex-basis
ma al posto di decidere di quanto dovrà crescere l’elemento, decide per quanto dovrà essere ridotto.
Cerchiamo quindi di modificare il nostro codice andando ad aggiungere delle dimensioni al nostro flex-basis
che sarebbero impensabili per la maggior parte degli schermi presenti in circolazione:
.ele{ flex-basis: 40%; flex-shrink: 1; } .ele1{ background-color: red; } .ele2{ background-color: yellow; } .ele3{ background-color: green; } .ele4{ background-color: blue; }
Come puoi notare tu stesso, data la nostra struttura HTML, un valore di flex-basis
del 40%
è del tutto impensabile. In fin dei conti se prendiamo i nostri quattro elementi ed andiamo a sommare i loro valori scopriremo che la totalità delle loro larghezze risulta essere del 160%
, un po’ più grande del classico 100%
.
In questo caso, se stavi lavorando con i float
, avresti sicuramente rotto il tuo layout; con FlexBox tutto questo invece non accade…

I nostri elementi si allineano uno di fianco all’altro senza andare a capo o rompere il layout in alcun modo. Ma che cosa succede se dovessi impostare un valore diverso per uno di questi elementi; diciamo che voglio dare un valore doppio al nostro elemento con sfondo giallo.
.ele{ flex-basis: 40%; } .ele1{ background-color: red; flex-shrink: 1; } .ele2{ background-color: yellow; flex-shrink: 2; } .ele3{ background-color: green; flex-shrink: 1; } .ele4{ background-color: blue; flex-shrink: 1; }
Ecco che, a differenza di quanto visto per flex-grow
, in questo caso sarà l’elemento con sfondo giallo a ridursi del doppio rispetto ai suoi fratelli.

Se la pensi come me, molto probabilmente troverai difficile comprendere quando ti converrà utilizzare questa proprietà (anzi se hai qualche idea non esitare ad inserirla all’interno del forum in modo tale da poter aprire una discussione per illuminare me e gli altri Skilled Students, condividere è crescita ricordatelo sempre!), ma almeno queste due spiegazioni ci hanno portato ad incontrare la regola flex
!
Finalmente incontriamo flex
Quello che ho appena fatto è stato presentarti una per una le regole che compongono flex
in questo modo sono stato in grado di presentarti le funzionalità e la sintassi di ciascuna di queste senza dover diventare matti andandole a scoprire tutte insieme; ma come puoi andare ad utilizzare questa regola?
Non devi far altro che prendere la sintassi che ti ho presentato precedentemente e andare a sostituire i nomi delle singole proprietà con i loro valori, ecco un semplice esempio:
.ele{ flex: 1 1 20%; }
Ricordi la sua sintassi, vero?
Il primo valore viene assegnato alla proprietà flex-grow
, il secondo a flex-shrink
mentre il terso viene assegnato a flex-basis
. Il ritmo è leggermente diverso (meglio dire l’opposto) ma trovi tutte le definizioni nei paragrafi precedenti.
Quindi? Che cosa abbiamo appena fatto?

Sembra che non sia successo niente, ma in un solo colpo siamo stati in grado di configurare tutte e tre le proprietà!
Comunque c’è anche da dire che la proprietà flex
permette anche di essere dichiarata con un unico valore, cerchiamo di capire come si comporta.
.ele1{ background-color: red; flex: 1; } .ele2{ background-color: yellow; flex: 2; } .ele3{ background-color: green; flex: 1; } .ele4{ background-color: blue; flex: 1; }
Prima ancora di andare a vedere il risultato all’interno del browser cerchiamo di capire meglio che cosa ho fatto.
Per prima cosa ho rimosso completamente tutte le proprietà impostate con .ele
, in questo modo non abbiamo la possibibilità di dichiarare dei valori che verranno applicati a tutti gli elementi.
Oltre a questo sto utilizzando la versione accorciata della proprietà flex
, quindi al posto di impostare 3 valori in questo caso ne vado ad impostare soltanto uno; sicuramente una soluzione più rapida che non ci costringe neanche a impostare la flex-basis
.
Fatte queste brevi precisazioni c’è da capire, che cosa succede nel browser? A seconda di quello che abbiamo visto fin ora potresti presumere che l’unico valore assegnato a flex
ci permette di impostare la proprietà flex-grow
, ma ne sei sicuro?

Noti niente di strano?
Molto probabilmente sembra che, proprio come dicevamo poco fa, venga applicata la regola flex-grow
e che questa permetta di far crescere del doppio il nostro elemento con sfondo giallo ma se fai questo esperimento nel tuo browser o guardi il video allegato a questa lezione ti accorgerai che il risultato è molto diverso…
Al posto di crescere del doppio, con la regola flex
così utilizzata, l’elemento giallo risulta essere due volte più grande degli altri.
Quindi, quando andrai ad utilizzare la proprietà flex
con un singolo valore non starai applicando quest’ultimo alla proprietà flex-grow
ma bensì starai dicendo al browser che desideri avere questo elemento più grande rispetto agli altri, di quanto basterà indicarlo all’interno del valore numerico che gli passerai 😉
Conclusioni
Siamo giunti al termine di questa seconda lezione e con questa dovresti aver già scoperto un’interessantissima caratteristica del modulo FlexBox, ovvero che non dovrai più preoccuparti delle grandezze dei tuoi elementi.
Se ti posso parlare con tutta franchezza, finalmente sono finiti i tempi del pixel-perfect.
In mia opinione questa è sempre stata una pratica sbagliata perché in fin dei conti tutto risultava carino e bellino quando si andava a vedere la grafica realizzata sullo schermo del grafico ma quando si doveva lavorare per trasfomare questo insieme di pixel e modellarlo all’interno di un ambiente dinamico come il web il più delle volte diventava semplicemente uno schifo.
Non voglio offendere nessuno con la mia precedente affermazione, ma se ci pensi bene, ora più che mai stiamo entrando in un mondo che non è dinamico soltanto per via dei linguaggi di programmazione che sviluppiamo, ma è dinamico anche nelle dimensioni degli schermi che vengono utilizzati!
Quindi è bene essere il più aggiornati possibile rispetto a queste dimensioni ed una volta compreso appieno le potenzialità offerte da FlexBox ti mostrerò come sia possibile utilizzare le Media Query e Sass per rendere i tuoi prossimi progetti più adatti al web che ci sta aspettando!