Generatore CSS Flexbox
Strumento gratuito per provare i layout Flexbox regolando dall'interfaccia flex-direction, justify-content, align-items, flex-wrap e gap, con anteprima in tempo reale. Il codice CSS generato si copia con un clic.
Consigli per l'uso
- justify-content allinea lungo l'«asse principale», align-items lungo l'«asse trasversale». Con flex-direction: column l'asse principale diventa verticale e l'effetto visivo delle due proprietà si scambia.
- Il preset «Centrato» combina justify-content: center e align-items: center: è lo schema Flexbox più classico per collocare un elemento al centro esatto.
- La proprietà gap si applica soltanto allo spazio fra gli elementi e non tocca il margine esterno del contenitore. A differenza di margin, crea uno spazio uniforme solo fra elementi adiacenti.
- Applicando align-self a un singolo elemento potete ignorare l'align-items del contenitore e allineare diversamente solo quell'elemento: comodo quando ne volete mettere in risalto uno.
- Attivando flex-wrap: wrap, gli elementi che non entrano nella larghezza del contenitore (o nell'altezza, con column) vanno automaticamente a capo. È lo schema usato di norma per i layout responsivi a schede.
Domande frequenti
A proposito — come Flexbox ha cambiato la storia dei layout CSS
Prima dell'arrivo di CSS Flexbox (nome ufficiale: CSS Flexible Box Layout Module), disporre gli elementi in orizzontale si faceva di norma con la proprietà float. Ma float nasce per far scorrere il testo attorno a un'immagine, e usarla per impaginare richiedeva una lunga serie di rimedi — dal celebre clearfix in poi — contro problemi come le altezze non allineate o il collasso dell'altezza dell'elemento genitore.
Flexbox, la cui prima bozza fu pubblicata dal W3C nel 2009, è stato progettato come modello di layout dedicato alla disposizione «monodimensionale». Allungare o restringere gli elementi lungo l'asse principale, distribuire uniformemente gli spazi, centrare verticalmente in una sola riga: operazioni che con float richiedevano decine di righe di espedienti si risolvono con proprietà dichiarative come justify-content e align-items.
Quando, intorno al 2015, l'implementazione è stata completata su tutti i browser principali, Flexbox si è diffuso rapidamente come strumento standard per gli schemi ricorrenti del design web: barre di navigazione, layout a schede, allineamento dei moduli. «Finalmente si può centrare verticalmente con Flexbox» è ricordato come uno dei cambiamenti più festeggiati nella comunità degli sviluppatori front-end dell'epoca.
Oggi Flexbox e CSS Grid, specializzato nei layout bidimensionali, convivono dividendosi i compiti: il primo per la disposizione interna dei componenti che si allineano in una direzione, il secondo per la griglia complessiva della pagina.