flex-wrap controlla se gli elementi flex rimangono su una sola riga o vanno a capo su più righe quando non c'è abbastanza spazio. Il valore predefinito nowrap forza gli elementi su una singola riga e potrebbe rimpicciolirli. wrap permette agli elementi di scorrere su nuove righe, mentre wrap-reverse li manda a capo in ordine inverso.

Laboratorio CSS Flexbox

Q: Qual è la differenza tra justify-content e align-items?

justify-content controlla l'allineamento lungo l'asse principale (orizzontale per impostazione predefinita), mentre align-items controlla l'allineamento lungo l'asse trasversale (verticale per impostazione predefinita). Quando si cambia flex-direction in column, gli assi si scambiano: justify-content diventa verticale e align-items diventa orizzontale.

Q: Qual è la differenza tra flex-grow, flex-shrink e flex-basis?

flex-basis imposta la dimensione iniziale di un elemento prima che lo spazio libero venga distribuito. flex-grow definisce quanto spazio extra un elemento dovrebbe assorbire rispetto agli altri elementi (0 significa non crescere). flex-shrink definisce quanto un elemento dovrebbe restringersi quando non c'è abbastanza spazio (0 significa non restringersi). La scorciatoia flex: 1 1 auto imposta tutti e tre contemporaneamente.

Q: Quando dovrei usare Flexbox rispetto a Grid?

Usa Flexbox per layout unidimensionali in cui gli elementi scorrono in una singola direzione (una riga di pulsanti, una barra di navigazione, una lista di schede su una riga). Usa CSS Grid per layout bidimensionali in cui è necessario controllare contemporaneamente sia le righe che le colonne (layout di pagina intera, gallerie di immagini, dashboard). I due sono complementari, non in competizione — molti design reali li combinano.

Laboratorio interattivo CSS Flexbox con anteprima visiva in tempo reale, controlli per singolo elemento, preset di layout reali (Holy Grail, Griglia di Card, Navbar, Modale) ed esportazione CSS con un clic. Impara flex-direction, justify-content, align-items, gap e altro ancora sperimentando in tempo reale.

Laboratorio CSS Flexbox

⚡ Layout di Avvio Rapido (clicca per caricare)

▦ Anteprima Live

→ asse principale ↓ asse trasversale 0 elementi suggerimento: clicca su un elemento per modificarlo

⚙ Contenitore (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ Elemento Selezionato (.flex-item)

Clicca su un elemento nell'anteprima per modificarne le proprietà.

📖 Guida Rapida — schemi comuni

▼

Voglio…	Usa questo
Centrare perfettamente un elemento	`justify-content: center; align-items: center`
Colonne di uguale larghezza	`flex: 1` su ogni elemento
Spingere un elemento a destra	`margin-left: auto` su quell'elemento
Mandare a capo le schede su schermi piccoli	`flex-wrap: wrap` + `flex: 1 1 240px`
Invertire l'ordine su mobile	`flex-direction: row-reverse` nella media query
Piè di pagina fisso in fondo al viewport	body: `display: flex; flex-direction: column; min-height: 100vh`
Spazio uniforme tra gli elementi	`justify-content: space-between`
Non restringere un elemento	`flex-shrink: 0` su di esso

CSS Generato

HTML Generato

Embed Laboratorio CSS Flexbox Widget

Laboratorio CSS Flexbox

Il Laboratorio CSS Flexbox è un ambiente di apprendimento interattivo e un generatore di codice per il moderno modulo CSS Flexible Box Layout. Regola le proprietà del contenitore (flex-direction, justify-content, align-items, gap) e le proprietà per ogni elemento (flex-grow, flex-shrink, flex-basis, align-self, order) e osserva l'aggiornamento del tuo layout in tempo reale. Quando ottieni qualcosa che ti piace, copia il CSS e l'HTML pronti da incollare direttamente nel tuo progetto.

Cos'è il CSS Flexbox?

Il CSS Flexbox (Flexible Box Layout) è un modello di layout unidimensionale progettato per distribuire lo spazio lungo un singolo asse (una riga o una colonna) e allineare gli elementi all'interno di un contenitore. Sostituisce le vecchie tecniche come i float e i trucchi inline-block per barre di navigazione, righe di schede, contenuti centrati e qualsiasi interfaccia utente in cui gli elementi devono adattarsi naturalmente al loro contenitore. A differenza del CSS Grid, che è bidimensionale, Flexbox eccelle nelle disposizioni più semplici in cui si controlla l'allineamento in una sola direzione alla volta.

Come usare questo laboratorio

Scegli un preset (opzionale): Scegli Holy Grail, Card Grid, Navbar, Hero, Modal o Sticky Footer per caricare un punto di partenza reale. Ogni preset è un layout completo e funzionante che puoi studiare o modificare.
Regola le proprietà del contenitore: Usa i controlli segmentati nel pannello a destra per impostare flex-direction, flex-wrap, justify-content, align-items, align-content e gap. La scena visiva si aggiorna immediatamente.
Modifica i singoli elementi: Fai clic su qualsiasi elemento nell'anteprima per selezionarlo. Sovrascrivi il suo order, flex-grow, flex-shrink, flex-basis e align-self indipendentemente dagli altri. Gli elementi con sovrascritture sono contrassegnati da un piccolo distintivo.
Aggiungi o rimuovi elementi: Usa Aggiungi elemento e Rimuovi selezionato per cambiare il numero di elementi e vedere come risponde il layout.
Copia il codice: La sezione Codice Generato in basso riflette sempre il tuo layout attuale. Copia CSS, HTML o entrambi con un solo clic.

Riferimento proprietà del contenitore

Il contenitore flex è l'elemento genitore con display: flex. Queste proprietà controllano come si comportano tutti i suoi figli insieme.

Proprietà	Valori	Effetto
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	Imposta la direzione dell'asse principale. `row` dispone gli elementi da sinistra a destra (predefinito); `column` li impila verticalmente.
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	Controlla se gli elementi rimangono su una riga o vanno a capo su più righe quando lo spazio finisce.
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	Allinea gli elementi lungo l'asse principale. Distribuisce lo spazio libero ai lati o tra gli elementi.
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	Allinea gli elementi lungo l'asse trasversale (perpendicolare all'asse principale).
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	Allinea le righe andate a capo lungo l'asse trasversale. Ha effetto solo quando gli elementi vanno a capo su più righe.
`gap`	lunghezza, es. `8px`, `1rem`	Imposta lo spazio (grondaia) tra gli elementi flex. Sostituisce il vecchio schema di spaziatura basato su `margin`.

Riferimento proprietà degli elementi

Queste proprietà si applicano ai singoli elementi flex (figli di un contenitore flex) e sovrascrivono le impostazioni predefinite del contenitore solo per quell'elemento.

Proprietà	Valori	Effetto
`order`	intero (predefinito `0`)	Riordina visivamente gli elementi senza cambiare l'HTML. I numeri più bassi vengono visualizzati per primi; i valori negativi spostano gli elementi all'inizio.
`flex-grow`	numero (predefinito `0`)	Definisce quanto spazio libero del contenitore questo elemento dovrebbe assorbire rispetto ai fratelli. `1` su ogni elemento divide lo spazio equamente.
`flex-shrink`	numero (predefinito `1`)	Definisce quanto un elemento può restringersi quando non c'è abbastanza spazio. `0` significa non restringersi mai — l'elemento mantiene la dimensione dichiarata.
`flex-basis`	`auto` · lunghezza · percentuale	Imposta la dimensione iniziale di un elemento prima che lo spazio libero venga distribuito. Imposta effettivamente la dimensione "ideale" dell'asse principale dell'elemento.
`align-self`	`auto` · uguale a `align-items`	Sovrascrive l'`align-items` del contenitore per un singolo elemento.

Qual è la differenza tra justify-content e align-items?

justify-content controlla l'allineamento lungo l'asse principale, mentre align-items controlla l'allineamento lungo l'asse trasversale. L'asse principale è la direzione impostata da flex-direction — orizzontale per row, verticale per column. Quando si cambia flex-direction da row a column, i due assi si scambiano, quindi justify-content diventa verticale e align-items diventa orizzontale. Questo scambio è una delle fonti più comuni di confusione per chi impara il Flexbox; gli indicatori degli assi del laboratorio sotto l'anteprima aiutano a renderlo visibile.

Come si centra un elemento con Flexbox?

Per centrare un singolo elemento sia orizzontalmente che verticalmente:

Tre righe:
display: flex;
justify-content: center; /* orizzontale */
align-items: center; /* verticale */

Questo è il sostituto moderno per i vecchi trucchi di centratura che coinvolgevano margin: auto, transform: translate(-50%, -50%) o position: absolute. Provalo nel laboratorio selezionando il preset Modal Center.

Spiegazione dei preset di layout reali

Holy Grail Layout

Il classico layout di pagina a tre colonne: barra laterale sinistra, contenuto principale, barra laterale destra — con un'intestazione e un piè di pagina. Storicamente molto difficile da costruire con i float; Flexbox lo rende banale. La colonna centrale usa flex: 1 in modo da assorbire tutto lo spazio orizzontale rimanente mentre le colonne laterali mantengono le larghezze dichiarate.

Card Grid

Una riga di schede che vanno a capo su nuove righe man mano che il viewport si restringe. Usa flex-wrap: wrap con ogni scheda a cui viene assegnato flex: 1 1 240px, il che significa che la scheda cresce e si restringe ma non diventa mai più stretta di 240px.

Navbar

Una barra di navigazione orizzontale con un logo a sinistra e link a destra. Il trucco è justify-content: space-between con il logo e il gruppo di link come i due figli, più un contenitore flex interno per i link stessi.

Hero Section

Pila verticale con contenuto centrato sia orizzontalmente che verticalmente — perfetto per le aree hero delle landing page. Usa flex-direction: column, justify-content: center e align-items: center su un contenitore alto.

Modal Center

Una finestra modale perfettamente centrata all'interno del suo overlay. La stessa ricetta di centratura in tre righe mostrata sopra, applicata a un contenitore overlay a schermo intero.

Sticky Footer

Un piè di pagina che sta in fondo al viewport quando il contenuto è breve, ma viene spinto giù quando il contenuto è lungo. Si ottiene dando al body display: flex; flex-direction: column; min-height: 100vh e al contenuto principale flex: 1.

Qual è la differenza tra flex-grow, flex-shrink e flex-basis?

Queste tre proprietà (combinate nella scorciatoia flex) descrivono come un elemento gestisce lo spazio:

flex-basis imposta la dimensione ideale dell'elemento prima che venga distribuito lo spazio libero. Pensa ad esso come al "punto di partenza" dell'elemento.
flex-grow dice "se c'è spazio rimanente, prendi questa quota". Un valore di 0 significa rifiutarsi di crescere; 1 significa crescere proporzionalmente; 2 significa prendere il doppio della quota di un elemento con 1.
flex-shrink dice "se non c'è abbastanza spazio, restringiti di questa quota". Il predefinito è 1 (restringimento proporzionale); 0 significa rifiutarsi di restringersi.

La scorciatoia flex: 1 si espande in flex: 1 1 0% — crescita uguale, restringimento uguale, base zero — il che significa che tutti gli elementi occupano una quota uguale del contenitore indipendentemente dal contenuto. flex: auto si espande in flex: 1 1 auto, che rispetta la dimensione del contenuto come base.

Quando dovrei usare Flexbox rispetto a Grid?

Usa Flexbox per layout unidimensionali in cui gli elementi scorrono in una singola direzione — una riga di pulsanti, una barra di navigazione, una singola colonna di schede. Flexbox è orientato al contenuto ed è ottimo quando vuoi che gli elementi si dimensionino da soli.

Usa CSS Grid per layout bidimensionali in cui è necessario controllare contemporaneamente sia le righe che le colonne — layout di pagina intera, gallerie di immagini, dashboard. Grid è orientato al layout e ti consente di posizionare gli elementi in tracce nominate.

I due sono complementari, non in competizione. Molti design reali li combinano: un layout di pagina Grid con barre di navigazione Flexbox e righe di schede all'interno.

Suggerimenti per padroneggiare Flexbox

Visualizza gli assi. Sappi sempre quale direzione è "principale" e quale è "trasversale" — i pill degli assi del laboratorio lo rendono esplicito.
Usa gap invece dei margini. I browser moderni supportano pienamente gap sui contenitori flex ed elimina la necessità di scomodi trucchi di margine sull'ultimo figlio.
Affidati a flex: 1. Quando vuoi che gli elementi condividano lo spazio equamente, questa scorciatoia è quasi sempre ciò che desideri.
min-width: 0 sugli elementi flex. Gli elementi hanno una larghezza minima implicita basata sul loro contenuto. Se stringhe lunghe non interrompibili (come gli URL) fanno traboccare il tuo layout, imposta min-width: 0 sull'elemento per sovrascriverlo.
Evita larghezze solo in percentuale. Mescolare larghezze in percentuale con flex-grow può produrre risultati sorprendenti. Preferisci flex-basis con un valore predefinito sensato.

Supporto browser e compatibilità

Il CSS Flexbox è supportato in ogni browser moderno inclusi Chrome, Firefox, Safari, Edge e tutti i principali browser mobili. La proprietà gap nei contenitori flex ha raggiunto il supporto universale nel 2021. I browser legacy più vecchi (IE10/11) richiedono prefissi fornitore e presentano diversi bug ben documentati; per quel pubblico, considera flexbugs.

Domande frequenti

Perché il mio elemento flex trabocca dal contenitore?

Gli elementi flex hanno un min-width: auto implicito basato sul loro contenuto. Parole lunghe, blocchi di codice o testo pre-formattato possono forzare un elemento a essere più largo del contenitore. Risolvilo impostando min-width: 0 sull'elemento (o min-height: 0 per i layout a colonna).

Qual è la differenza tra space-between, space-around e space-evenly?

space-between non mette spazio alle estremità e mette spazio uguale tra gli elementi. space-around mette mezzo spazio a ogni estremità e spazi interi tra gli elementi. space-evenly mette spazio uguale alle estremità e tra gli elementi. Alternali nel laboratorio per sentire la differenza.

Posso animare le proprietà flex?

Sì. flex-grow, flex-shrink, flex-basis, order e gap possono essere transizionati. L'animazione di flex-direction, justify-content e align-items non è supportata perché sono proprietà discrete enumerate.

Il laboratorio funziona offline?

Tutti i calcoli Flexbox avvengono nel tuo browser utilizzando CSS nativo. Una volta caricata la pagina, puoi usare il laboratorio senza una connessione internet — non ci sono chiamate API o elaborazioni lato server.

Il codice generato è pronto per la produzione?

Sì. Il CSS esportato utilizza proprietà standard supportate in ogni browser evergreen. L'HTML utilizza nomi di classe semantici (flex-container, flex-item) che puoi rinominare per adattarli alle convenzioni del tuo progetto.

Risorse aggiuntive

Cita questo contenuto, pagina o strumento come:

"Laboratorio CSS Flexbox" su https://MiniWebtool.com/it/laboratorio-css-flexbox/ di MiniWebtool, https://MiniWebtool.com/

dal team miniwebtool. Aggiornato: 25 aprile 2026

Altri strumenti correlati:

Generatore di Schemi di Colori

Compressore CSS Online

Generatore di CSS GridNuovo

Generatore di Gradiente

Compressore di HTML Online

Laboratorio CSS Flexbox

Laboratorio CSS Flexbox

Cos'è il CSS Flexbox?

Come usare questo laboratorio

Riferimento proprietà del contenitore

Riferimento proprietà degli elementi

Qual è la differenza tra justify-content e align-items?

Come si centra un elemento con Flexbox?

Spiegazione dei preset di layout reali

Holy Grail Layout

Card Grid

Navbar

Hero Section

Modal Center

Sticky Footer

Qual è la differenza tra flex-grow, flex-shrink e flex-basis?

Quando dovrei usare Flexbox rispetto a Grid?

Suggerimenti per padroneggiare Flexbox

Supporto browser e compatibilità

Domande frequenti

Perché il mio elemento flex trabocca dal contenitore?

Qual è la differenza tra space-between, space-around e space-evenly?

Posso animare le proprietà flex?

Il laboratorio funziona offline?

Il codice generato è pronto per la produzione?

Risorse aggiuntive

Altri strumenti correlati:

Strumenti per webmaster:

Strumenti in primo piano: