Come ragionare sui tre layout del video
Il video parte da tre esigenze che ritornano nei siti: dare la stessa importanza a più elementi, gestire una raccolta che cambia e affiancare un contenuto a informazioni secondarie. Qui ritrovi il ragionamento dietro quei layout, con le precisazioni usate negli esercizi.
Guarda il video originale su YouTube (in inglese) ↗
Capitoli del video originale
Il contenitore organizza i suoi figli diretti
Ogni esempio parte da un contenitore impostato su Display: Flex e da alcuni Box al suo interno. Il contenitore decide come disporre i figli diretti. I testi dentro ciascun Box restano contenuti di quel Box: non diventano tutti elementi della stessa riga Flex.
Le impostazioni si dividono quindi tra due posti. Sul contenitore decidi se formare nuove righe e quanto spazio lasciare tra gli elementi. Sui figli definisci una dimensione di partenza, la possibilità di usare spazio libero e gli eventuali limiti.
Colonne con la stessa importanza
Pensa a vantaggi di un servizio, dati da mettere in evidenza o piani di prezzo. Se gli elementi hanno lo stesso ruolo, puoi volere colonne della stessa larghezza anche quando una contiene più testo. Flex, da solo, le mette in riga ma non garantisce quella parità.
Nell’esempio, Basis 100% dà a ciascuna colonna la stessa dimensione di partenza rispetto alla larghezza interna del contenitore. Su una sola riga, gli elementi possono restringersi per condividere lo spazio. Con le stesse impostazioni e Min W 0 ottieni colonne di larghezza uguale nel campione, anche aggiungendone una.
Una larghezza del 25% può essere una scelta sensata per quattro colonne specifiche. Il punto del video è diverso: descrivere un comportamento che si adatti anche quando cambia il numero. La Basis è una dimensione di partenza e non sostituisce tutte le altre condizioni del layout.
Sugli schermi stretti, restare affiancati può rendere il testo difficile da leggere. Per questo l’esercizio abilita Wrap da Tablet: con Basis 100%, ciascuna colonna può occupare una riga propria. Attivare Wrap già su Desktop produrrebbe quel comportamento anche nella vista ampia.
Una raccolta di card che può cambiare
Per attività, progetti o contenuti di una raccolta, spesso non sai in anticipo quanti elementi ci saranno. Nel video questo layout ha un aspetto simile a una griglia, ma Flexbox distribuisce lo spazio di ogni riga separatamente.
Basis 13rem indica una dimensione di partenza per le card. Con Wrap sul contenitore, quando un’altra card non entra nella riga, passa alla successiva. Il numero di card che trova posto dipende anche dal Gap, cioè dalla distanza tra loro.
Grow 1 permette alle card di condividere lo spazio che avanza sulla propria riga. Se l’ultima riga contiene due card invece di tre, quelle due possono diventare più larghe. Questo è un effetto da scegliere consapevolmente: non devi aspettarti che tutte le colonne restino allineate tra righe diverse.
Basis non è un minimo garantito. Senza Wrap, le card possono restringersi per restare insieme; anche con Wrap, un elemento che non entra da solo può avere bisogno di restringersi. Min W e contenuto incidono sul risultato.
Contenuto principale e indice laterale
Per un articolo con indice o una guida con informazioni secondarie, i due Box hanno ruoli diversi. Nell’esempio partono da Basis 70% e 30%, senza spazio tra i due, così il testo principale ha più spazio nella vista ampia.
Restringendo lo schermo, però, il 30% può diventare troppo poco per l’indice. Min W 13rem protegge la sua larghezza. Da solo questo limite non risolve il layout: può lasciare troppo poco spazio al contenuto principale.
Wrap permette ai due Box di passare su righe separate quando non entrano più insieme. Grow 1 su entrambi consente poi a ciascuno di riempire la propria riga. Le percentuali restano dimensioni di partenza: minimi, padding e contenuti possono modificare le proporzioni finali.
Scegliere e verificare il comportamento
I tre esempi usano poche proprietà, ma con obiettivi differenti. Basis dà la dimensione di partenza; Grow distribuisce lo spazio libero; Min W stabilisce un limite minimo; Wrap permette nuove righe. Il risultato dipende dalla loro combinazione e dal breakpoint in cui imposti le regole.
Quando riusi un pattern, prova larghezze ampie, strette e intermedie. Cambia anche la quantità di testo o il numero degli elementi, poi confronta ciò che accade con il risultato desiderato. I valori del video sono un punto di partenza per ragionare, non una ricetta adatta a qualsiasi contenuto.