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.

Ultimo aggiornamento: 2026-09-20

Costruire a mano una disposizione Flexbox

Flexbox è il metodo di disposizione che allinea gli elementi lungo un solo asse. Questo strumento vi lascia commutare flex-direction, justify-content, align-items, flex-wrap e gap sullo schermo, vedere l'esito via via e ricopiare tale e quale il CSS ottenuto.

Quasi ogni difficoltà con Flexbox si riduce a capire in quale verso agiscano justify-content e align-items. Il primo governa la collocazione lungo l'asse principale, il secondo lungo l'asse trasversale. Il fastidio sta nel fatto che nell'istante in cui mutate flex-direction da row a column, quei due assi si scambiano. Il justify-content che si occupava dell'orizzontale finché gli elementi stavano l'uno accanto all'altro passa a occuparsi del verticale non appena vengono impilati. La maggior parte delle lagnanze secondo cui qualcosa «non si centra» equivale a non essersi accorti che la proprietà da mutare si è scambiata.

Come si usa

Partite da una preimpostazione Le disposizioni consuete — centrare, distanziare, impilare — sono a portata di mano.
Commutate flex-direction Passare fra row e column rende visibile lo scambio degli assi.
Provate le proprietà di allineamento Mutate a turno justify-content e align-items e accertate come ciascuna si comporti.
Copiate il CSS generato Non appena la disposizione vi soddisfa, si incolla tale e quale nel vostro codice.

Consigli per sfruttarlo al meglio

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.

Quando torna utile

Nel montare una barra di navigazione

Il marchio a sinistra e il menu a destra è il caso classico di justify-content: space-between.

Nel distanziare le schede in modo uniforme

Usare gap vi risparmia l'artificio di annullare i margin per ottenere spaziature uniformi.

Nel centrare un elemento in entrambi i versi

Porre justify-content e align-items entrambi a center è la via più breve.

Nell'apprendere Flexbox

Mutare un valore e guardarne l'esito lo insegna più in fretta di qualsiasi lettura.

Termini di Flexbox

Asse principale: La direzione lungo la quale gli elementi si allineano, fissata da flex-direction. Corre in orizzontale con row e in verticale con column.
Asse trasversale: La direzione perpendicolare all'asse principale. Quando il principale si scambia, questo si scambia con lui.
Justify-content: Governa la collocazione lungo l'asse principale, offrendo centratura, distanziamento, distribuzione uniforme e il resto.
Align-items: Governa la collocazione lungo l'asse trasversale. Sotto lo stretch predefinito i figli crescono fino all'altezza piena.
Flex-wrap: Decide se gli elementi che non entrano passino a una riga nuova. Lasciati a nowrap vengono invece compressi.
Gap: Lo spazio lasciato fra gli elementi. A differenza di margin, non aggiunge spazio superfluo ai bordi esterni.

Domande frequenti

justify-content allinea lungo l'«asse principale» del Flexbox, cioè la direzione stabilita da flex-direction (per impostazione predefinita orizzontale), mentre align-items allinea lungo l'«asse trasversale», perpendicolare al primo. Con flex-direction: row l'asse principale è orizzontale, quindi justify-content governa la disposizione in orizzontale e align-items quella in verticale; con flex-direction: column i ruoli si scambiano.

Con column l'asse principale è verticale, quindi per centrare verticalmente si usa justify-content: center, mentre per centrare orizzontalmente (asse trasversale) si usa align-items: center. Combinandoli si collocano gli elementi al centro esatto anche in un layout impilato.

Il supporto di gap in Flexbox è arrivato tardi su Chrome e Safari, fino al 2021 circa, ma oggi è disponibile su tutti i browser principali (Chrome dalla versione 84, Safari dalla 14.1, Firefox dalla 63). Se dovete assolutamente supportare browser molto datati, valutate una soluzione alternativa con margin.

flex-grow indica quanto un elemento debba allargarsi per occupare lo spazio libero del contenitore, flex-shrink quanto debba restringersi quando il contenitore è troppo stretto. Entrambe stabiliscono, a partire dalla dimensione di base dell'elemento (flex-basis), come distribuire l'eccedenza o la carenza di spazio.

In generale Flexbox è adatto ai gruppi di elementi disposti in una sola direzione, riga o colonna, come le barre di navigazione o le schede affiancate. CSS Grid è invece adatto ai layout bidimensionali in cui si controllano insieme righe e colonne, come l'impaginazione complessiva di una pagina. Come regola: Flexbox per le disposizioni semplici, Grid quando serve una griglia articolata.

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.

Vedi tutte le curiosità