Come si calcolano le larghezze in Flexbox

La scorsa settimana ti abbiamo presentato, all'interno del nostro webinar, il modulo FlexBox che sta acquistando sempre più supporto. In trasmissione abbiamo parlato di "come si calcolano le larghezze" ma ho pensato che un approfondimento non faccia affatto male.

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.

Se vuoi approfondire l’argomento FlexBox ti ho gia collegato il nostro webinar che ti ho presentato velocemente perché quest’oggi ho deciso di parlare di un dettaglio molto interessante di FlexBox o per meglio dire del tuo browser; scopriremo come calcola automaticamente le dimensioni dei nostri elementi.

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-shrinkper calcolarne le nuove misure.

Forse è 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 di skillsAndMore o eri presente al webinar della settimana scorsa sai già che questo modulo porta un rapporto di parentela all’interno della definizione dei nostri elementi, al posto di utilizzare la proprietà display sull’elemento che vogliamo spostare la utilizziamo sull’elemento genitore 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 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 non è stato creato per questo motivo.

Ecco che è giunto il momento di conoscere altre due proprietà molto interessanti che vengono utilizzate all’interno della proprietà 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 puoi 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 coinvolgere tutte le singole proprietà che ti ho presentato precedentemente in un colpo solo. Se non ti ricordi la sintassi di questa proprietà eccoti accontentato:

2_2-flex

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 disponibile 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 che ogni singola unità di crescita ha questo valore non ci resta che distribuirla ai 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 singolo elemento partendo dalla grandezza stessa del contenitore. La cosa che mi disturba un po’ di più è 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 su skillsAndMore) 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 proprietà scorciatoia flexcome secondo valore; 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?

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 nei vari 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 nell’effettivo 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.

Sicuramente è 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.

Come ormai dovresti aver capito, all’interno di skillsAndMore abbiamo creato 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 ci troviamo per fare un webinar gratuito dove ti spieghiamo diverse caratteristiche rivolte allo sviluppo web e alla tua professione in generale. Se non ti è ancora capitato di vederci ti lascio alla nostra playlist su YouTube ma se vuoi scoprire quale sia il prossimo argomento che trattiamo non devi far altro che iscriverti a questa pagina!

 

Lascia il tuo Pensiero