Flexbox: pattern di layout in Webflow

Alla fine di questa lezione avrai tre pattern di layout Flexbox da inserire in quasi ogni progetto — colonne uguali, un layout grid-ish fluido e una struttura content + sidebar. Non è teoria sul flexbox; sono i pattern reali che hai visto su decine di siti, costruiti passo passo.

L’obiettivo non è memorizzare impostazioni. È capire come quattro proprietà — flex-basis, flex-grow, wrap e min-width — lavorano insieme. Quando scatta, smetti di copiare valori dai tutorial e inizi a progettare layout resilienti, riutilizzabili e difficili da rompere.

Ogni pattern qui usa lo stesso mattoncino: un flex-container (un div su display: flex) con qualche figlio dentro. Ciò che cambia tra loro è quali di quelle quattro proprietà attivi.

Come funziona

Colonne uguali è per tutto ciò che deve sembrare ugualmente importante — blocchi di feature, highlight di statistiche, piani prezzi. Metti qualche figlio in un flex container e vedrai subito il problema: la larghezza di ogni colonna segue il suo contenuto, quindi quella con più testo è più larga. La soluzione è flex-basis: 100% sui figli. Dice a ogni colonna di spingere contro le altre con la stessa forza e reclamare una quota uguale del container. La magia è che è indipendente dal numero: tre colonne o cinque, restano perfettamente uguali. Verrebbe voglia di usare 25% su una riga da quattro — non farlo. Una percentuale fissa vale solo per quel numero esatto; togli una colonna e la riga smette di riempirsi. 100% descrive un sistema, non un numero fisso.

Layout grid-ish è per card, collezioni CMS, gallerie — tutto ciò che deve sembrare una griglia ma restare fluido. Qui i figli prendono flex-grow: 1, che significa “se avanza spazio, potete prenderne tutti una quota uguale”. Da solo sembra colonne uguali, quindi il comportamento vero arriva aggiungendo un flex-basis e attivando wrap sul parent. Con flex-basis: 50%, solo due item entrano per riga e il resto va a capo. Sostituisci la percentuale con un valore fisso tipo 13rem e gli item restano su una riga finché c’è spazio, poi vanno a capo naturalmente quando il viewport si stringe — responsività quasi gratis. Il compromesso: puoi ritrovarti con, ad esempio, tre item su una riga e uno solo sotto, quindi è flessibile più che perfetto al pixel.

Content + sidebar è per una chiara gerarchia primario/secondario — un articolo con un indice, una doc con una nav, una pagina con una CTA persistente. Metti un div content e un div sidebar in un flex container, dai flex-grow a entrambi e imposta flex-basis: 70% sul content e 30% sulla sidebar. Da solo, stringere il viewport schiaccia entrambi — male per la sidebar. Quindi aggiungi una min-width alla sidebar (es. 13rem) e, pezzo mancante, attiva wrap sul container. Ora quando lo spazio scarseggia la sidebar scende sotto il content e risale quando c’è posto. Scambiali se vuoi la sidebar a sinistra.

Il filo che attraversa tutti e tre: wrap è ciò che trasforma una riga flex in un layout responsive. Senza, i figli si limitano a rimpicciolirsi (e alla fine vanno in overflow). Con, si ridispongono. Impara come flex-basis imposta la dimensione di partenza, grow divide gli avanzi, min-width fissa un minimo e wrap gestisce l’overflow — e potrai costruire quasi ogni layout con queste quattro.

Come si usa

1. Colonne uguali — aggiungi un flex-container (display: flex), metti dentro le colonne e imposta il flex-basis di ognuna a 100%. Aggiungi o togli colonne liberamente; restano uguali.
2. Rendi responsive le colonne uguali — seleziona il container e attiva wrap sul breakpoint tablet o landscape così le colonne strette scendono a capo invece di andare in overflow.
3. Layout grid-ish — riusa il flex container (ancora senza wrap), dai ai figli flex-grow: 1, poi imposta un flex-basis — 50% per due per riga, o un valore fisso tipo 13rem per “quanti ne entrano”.
4. Fai andare a capo il grid-ish — attiva wrap sul parent così gli item passano a nuove righe; vai in preview e stringi il viewport per confermare che si impilano a una colonna su mobile.
5. Content + sidebar — in un flex container, aggiungi un div content e un div sidebar, attiva grow su entrambi e imposta flex-basis a 70% e 30%.
6. Proteggi la sidebar — dai alla sidebar una min-width (es. 13rem) e attiva wrap sul container così scende sotto il content sugli schermi piccoli e torna su quando c’è spazio.

Tre pattern, quattro proprietà. Più di qualsiasi singolo layout, ciò che porti a casa è come ragiona Flexbox — ed è questo che ti fa progettare layout che reggono quando contenuti e schermi cambiano.