Come si calcolano le larghezze in Flexbox

Sicuramente FlexBox è un modulo incredibilmente interessante, grazie a questo è possibile separare la semantica dallo stile ma non è di questo che voglio parlare, gli obiettivi di questo articolo sono ben altri. Oggi voglio aiutarti a capire un aspetto veramente importante di questo modulo: come si calcolano le larghezze.

Se vuoi approfondire l’argomento FlexBox non posso fare a meno che consigliarti il nostro corso dedicato perché quest’oggi ho deciso di parlare di un dettaglio molto interessante di FlexBox o per meglio dire del tuo browser. Perché diciamoci la verità, è comodo che sia il browser a calcolare le larghezze per noi e che disponga i vari elementi, ma conoscere le logiche che stanno alla base di queste operazioni ci aiuta a diventare degli sviluppatori migliori!

Proprio per questo motivo in questo articolo ti presenterò le formule matematiche che ti permetteranno di calcolare con precisione il comportamento dei tuoi elementi. Non perdiamo altro tempo e andiamo subito a scoprirle!

Di una cosa sono sicuro, grazie aquesto modulo la nostra vita è migliorata parecchio.

Le dimensioni dei nostri elementi vengono calcolate automaticamente dal browser che è in grado di comprendere le impostazioni di flex-grow e flex-shrink. Forse però è necessario fare un piccolo passo indietro e parlare di come funziona FlexBox in generale giusto per essere sicuri che partiamo tutti dallo stesso livello.

Il funzionamento di Flexbox

Se hai seguito il corso sai già che questo modulo introduce un rapporto di parentela all’interno della definizione dei nostri elementi, al posto di utilizzare la proprietà display sull’elemento che vogliamo trasformare la utilizziamo sull’elemento che lo contiene impostando il suo valore a flex.

Ecco un esempio per far capire la relazione:

Come puoi vedere la proprietà display viene impostata al valore flex soltanto all’interno dell’elemento #container, i suoi elementi interni hanno una proprietà FlexBox veramente interessante, quella che ci permette di impostare una larghezza definita.

Hai incontrato `flex-basis`

Con il CodePen che ti ho condiviso non ti ho descritto soltanto la relazione padre-figlio che abbiamo a disposizione quando lavoriamo con FlexBox, ma hai anche scoperto che la proprietà flex-basis permette di dichiarare lalarghezza occupata dai nostri elementi!

Nell’esempio precedente è stato scritto che tutti gli elementi che hanno classe .ele devono essere larghi il 20% del proprio contenitore e questo è proprio quello che fanno. Se non ci sono altre proprietà in gioco, con flex-basis è molto facile creare degli elementi che non dovranno adattarsi alla grandezza della finestra (se definiti in px),  peccato che FlexBox e la proprietà flex-basis non sono stati creati per questo motivo.

Ecco che è giunto il momento di conoscere altre due proprietà molto interessanti che vengono utilizzate all’interno della scorciatoia flex, ovvero flex-grow e flex-shrink.

Stringiamo la mano a flex-grow

Adesso è giunto il momento di fare un test leggermente più avanzato, con la sezione precedente hai scoperto che è possibile definire una larghezza di base ai tuoi elementi semplicemente utilizzando la proprietà flex-basis e questa non fa assolutamente niente per adattare le dimensioni alla grandezza del contenitore.

Per fare questo bisogna dire al nostro browser, grazie alla proprietà flex-grow, che ha il permesso di far crescere la larghezza dei nostri elementi fino a raggiungere l’intera ampiezza del contenitore.

Ma questi elementi dovranno crescere tutti allo stesso modo? Come possiamo modificare il rapporto di crescita tra questi elementi?

Non c’è altro modo se non scoprire la proprietà flex-grow.

A seconda della risoluzione con la quale stai leggendo questo articolo succede qualcosa di strano, tendenzialmente dagli 800px in giu, gli elementi hanno tutti la stessa dimensione, ma se guardi questo esempio di codice in uno schermo più grande noterai che il secondo elemento è leggermente più largo rispetto agli altri…

Il testo contenuto all’interno dei singoli box non è stato messo lì per caso, praticamente è la sintassi che puoi usare con la proprietà flex per utilizzare le singole proprietà in un colpo solo.

Ma torniamo a focalizzare la nostra attenzione sul valore di flex-grow, come fa il nostro browser a calcolare la larghezza dei singoli elementi? La risposta a questa domanda ci viene data da un’ottimo articolo di Chris Wright che ci fornisce addirittura una formula matematica.

Questa formula descrive nel dettaglio come funziona questa proprietà CSS, dalla sua definizione, questa è in grado di distribuire lo spazio disponibile (quello che resta una volta applicata la flex-basis) per tutti gli elementi ai quali è stato impostato un flex-grow, quindi prima di poter arrivare alla definizione conclusiva dobbiamo capire prima come il browser calcola questa grandezza:

Spazio Disponibile = ( dimensione del contenitore - il totale dei flex-basis )

Adesso che abbiamo messo nero su bianco questo calcolo possiamo dire che se il nostro contenitore è largo 1000px, allora lo spazio che avanza dalla dichiarazione di flex-basis sarà di 200px, questo perché 1000 - ( 200 * 4 ) = 200. Adesso che abbiamo risolto questo semplice calcolo dobbiamo rispondere alla domanda “Come faccio a conoscere la singola unità di crescita?”. Ancora tutto molto semplice:

Unità di Crescita = ( Spazio Disponibile / la somma di flex-grow )

Praticamente per sapere quanto è il valore di una singola unità di crescita dobbiamo dividere lo Spazio Disponibile (che abbiamo calcolato precedentemente) per la somma di tutti i valori flex-grow che sono stati assegnati ai singoli elementi; nel nostro caso: 1 + 2 + 1 + 1 = 5.

Andando ora ad eseguire il calcolo precedente scopriamo che una singola unità di crescita ha valore 40px.

Adesso che conosciamo il valore di una singola unità di crescita non ci resta che distribuirla sui singoli elementi rispettando il valore di flex-grow, ovvero al nostro secondo elemento che ha un valore 2 vedrà assegnato due volte il valore dell’unità di crescita rispettando questo semplice calcolo matematico:

Dimensione Elemento Flex = ( flex-basis + ( Unità di Crescita * numero flex-grow ) )

Ed ecco fatto, adesso sei in grado di calcolare la dimensione di ogni tuo elemento partendo dalla grandezza stessa del contenitore. La cosa che mi disturba un po’ di questa formula matematica è che per raggiungere questo risultato abbiamo dovuto fare ben 3 operazioni, tutte molto semplici e che si possono fare anche a mente, ma la matematica ci insegna che è possibile ridurre il numero di queste equazioni, vediamo come:

Dimensione Elemento Flex = flex-basis + ( ( Spazio Disponibile / la somma di flex-grow ) * valore flex-grow dell'elemento )

Adesso hai una semplicissima formula matematica che ti permetterà di conoscere in anticipo quanto i tuoi elementi saranno in grado di crescere a seconda delle dimensioni del tuo contenitore!

Non si parla di sola crescita…

Se conosci da vicino il modulo FlexBox (e se non ti ricordo che c’è un ottimo corso che ti aspetta) ormai dovresti sapere che questo modulo non gestisce soltanto la crescita dei nostri elementi ma una cosa ancora più importante è la possibilità di gestire come questi elementi vengono ridotti in base alle dimensioni del contenitore.

Probabilmente non ti ricordi il nome specifico della proprietà perché si trova spesso all’interno della scorciatoia flexcome secondo valore, ma voglio aiutarti ricordandoti che il suo nome è flex-shrink.

Come puoi vedere da questo semplice esempio, la proprietà flex-shrink ci permette di gestire la riduzione dei nostri elementi in modo da poter controllare il nostro layout anche all’interno di schermi più piccoli, ma resta una domanda: come fa il browser a calcolare di quanto ridurre l’elemento?

Prendendo spunto dalla formula che abbiamo creato precedentemente potresti pensare di creare una formula matematica come:

Riduzione Elemento Flex = flex-basis - ( numero flex-shrink / somma flex-shrink totali * spazio in eccesso )

Questa formula inganna molto perché in molti contesti funziona abbastanza bene, ma negli esperimenti svolti da Chris ha dimostrato di non restituire dei valori affidabili al 100%, ecco perché è stato necessario sviluppare una nuova formula.

Per prima cosa dobbiamo essere in grado di calcolare quale sia la dimensione totale con un calcolo un po’ diverso, per fare questi conti prendiamo in esame il codice inserito precedentemente dove il contenitore ha una grandezza di 600px e calcolando la somma dei vari flex-basistroviamo che abbiamo un’eccedenza di -200px. Calcoliamo quindi la larghezza totale dei nostri elementi con questo strano calcolo che chiariremo a breve:

Elemento 1 ( 1 * 200 ) + Elemento 2 ( 2 * 200 ) + Elemento 3 ( 1 * 200 ) + Elemento 4 ( 1 * 200 ) = Larghezza Totale ( 1000 )

Fatto questo calcolo, che ti prego di prendere per buono così, è giunto il momento di calcolare il coefficiente di riduzione per i nostri elementi:

Coefficiente di Riduzione (Elemento 2) = Elemento 2 ( 2 * 200px ) / Larghezza Totale ( 1000px ) = 0,4

Per sapere con precisione di quanto verrà ridotto il nostro elemento in base a queste dimensioni non ci resta altro che applicare la seguente formula:

Spazio da Rimuovere (Elemento 2) = Coefficiente di Riduzione (Elemento 2) * Spazio Negativo ( -200px ) = -80px

Ecco risolto il nostro dilemma, se adesso andiamo a calcolare la larghezza del secondo elemento scopriremo che misura soltanto 120px ovvero la misura principale di flex-basis ma ridotta del valore che abbiamo calcolato.

Conclusioni

Siamo giunti al termine di questo articolo e spero proprio che il contenuto ti sia piaciuto. Personalmente scoprire come funziona il calcolo delle grandezze del modulo FlexBox mi ha aiutato moltissimo a comprendere meglio come sia possibile sfruttarlo e gestirlo.

Quello di oggi è stato un argomento molto tecnico e ti ricordo che il browser esegue automaticamente questi calcoli, quindi non dovrai farli con la calcolatrice in mano, ma sono sicuro che dopo aver letto questo articolo hai una conoscenza più approfondita di questo modulo e sarai pronto a gestire al meglio queste nuove funzionalità.

Come ormai dovresti aver capito, all’interno di questo sito abbiamo un corso dedicato che ti permetterà di approfondire i concetti relativi a FlexBox e dove ti spiegheremo anche come utilizzarlo grazie a Sass, ma il materiale formativo non finisce certo qua!

Ti ricordo che ogni settimana pubblichiamo nuovi articoli con i quali vogliamo presentarti alcune caratteristiche che troviamo interessanti nel mondo dello sviluppo e della promozione della propria attività. Se non vuoi restare indietro ti suggerisco di iscriverti adesso alla nostra newsletter mentre se vuoi approfondire gli argomenti che trattiamo abbiamo una libreria di corsi in costante aggiornamento.

Spero proprio che sapere che puoi fare affidamento a questo sito per tutti i materiali formativi di cui hai bisogno sia per te una buona notizia e se conosci qualcuno che potrebbe beneficiare dalla lettura dei nostri contenuti ti invito a condividere gli articoli e corsi che pubblichiamo. Non soltanto ci aiuterai a crescere ma ti posizionerai come un professionista che resta aggiornato sugli sviluppi recenti.