Playground CSS Flexbox
NovitàRegola le proprietà flex con anteprima in tempo reale e copia il CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Un generatore visuale di flexbox che scrive il CSS al posto tuo
Questo generatore flexbox trasforma il CSS Flexible Box Layout in qualcosa che puoi vedere. Invece di indovinare cosa faranno justify-content o align-items, attivi ogni proprietà su un controllo etichettato e guardi l'anteprima dal vivo riorganizzarsi istantaneamente — poi copi codice pulito e pronto per la produzione. Funziona interamente nel tuo browser, senza registrazione e senza caricare nulla.
È un vero playground flexbox: un vero contenitore flex con elementi figlio modificabili, controlli completi del contenitore e per ogni elemento, contenitori annidati, un'anteprima responsiva ridimensionabile e un URL condivisibile. Che tu stia imparando flexbox o costruendo rapidamente una barra di navigazione, una riga di schede o un hero centrato, ottieni il layout esatto — e il CSS, Tailwind o Bootstrap corrispondente — in pochi secondi.
Ogni proprietà del contenitore, con anteprima dal vivo
Controlla il contenitore come prevede la specifica. Imposta flex-direction (row, row-reverse, column, column-reverse) per scegliere l'asse principale, justify-content per distribuire gli elementi lungo di esso e align-items per allinearli sull'asse trasversale. Attiva flex-wrap per far scorrere gli elementi su nuove righe, usa align-content per distribuire quelle righe avvolte e imposta valori indipendenti di gap per righe e colonne.
Una legenda degli assi integrata mostra quale direzione è l'asse principale e quale è l'asse trasversale al cambio di flex-direction, in modo che la relazione tra justify-content e align-items diventi finalmente chiara. È un cheat sheet di flexbox pratico che impari facendo.
Controllo per elemento: grow, shrink, basis, order e align-self
La maggior parte dei generatori si ferma al contenitore. Questo ti permette di cliccare su qualsiasi elemento nell'anteprima e modificarlo individualmente: imposta flex-grow, flex-shrink e flex-basis (la proprietà abbreviata flex), sovrascrivi il suo align-self e cambia il suo order per riposizionarlo senza toccare l'HTML. Aggiungi o rimuovi elementi per testare come si ridistribuisce lo spazio.
Questo rende semplice costruire schemi reali — una barra laterale fissa accanto a una colonna principale flessibile (flex: 0 0 240px accanto a flex: 1), un singolo elemento centrato o un link nel footer spinto all'estremo con margin-left: auto.
Flexbox annidato e anteprima responsiva
I layout reali si annidano. Qualsiasi elemento può diventare il proprio contenitore flex annidato con direzione, justify e align propri — esattamente ciò di cui un generatore di flexbox annidato ha bisogno per schede con una riga di intestazione sopra il corpo o una barra degli strumenti dentro un'altra barra degli strumenti. Il codice generato include anche le regole annidate.
Poiché flexbox riguarda il comportamento responsivo, l'anteprima è ridimensionabile: trascina la maniglia o scegli un preset di larghezza Mobile / Tablet / Desktop e guarda gli elementi avvolgersi e riallinearsi a ogni dimensione. È il modo più veloce per confermare il comportamento di un layout flexbox responsivo prima di pubblicarlo.
Copia come CSS, Tailwind o Bootstrap — e confronto con altri strumenti
Cambia la scheda di output per ottenere il formato usato dal tuo progetto. CSS ti dà regole pulite .container e per ogni elemento usando la proprietà abbreviata flex. Tailwind scrive le classi di utilità — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — in uno snippet HTML pronto da incollare. Bootstrap produce le classi di utilità equivalenti d-flex. Vengono emesse solo le proprietà che hai effettivamente modificato, quindi l'output rimane minimale e leggibile.
Altri generatori visuali come Flexbox.help offrono le proprietà del contenitore ma saltano i controlli per elemento e i contenitori annidati. Il playground online di Tailwind non genera CSS vanilla. Questo strumento supporta tutti e tre i formati di output, gestisce l'annidamento e funziona offline una volta caricato — nessun account, nessun costo, nessun dato che lascia il tuo browser.
Frequently asked questions
Cos'è Flexbox in CSS e perché si usa?
Flexbox (CSS Flexible Box Layout) è un modello di layout unidimensionale per disporre elementi in una singola riga o colonna e distribuire lo spazio tra di essi. Si attiva con una sola riga — display: flex — sull'elemento padre, e i suoi figli diventano elementi flex che puoi allineare, distribuire e ridimensionare senza float o margini manuali. È usato perché semplifica compiti comuni: centrare elementi, colonne di uguale altezza, barre di navigazione, righe di schede e layout che prima erano complicati.
Come si usa flexbox?
Aggiungi display: flex all'elemento contenitore, poi controlla i figli con le proprietà del contenitore — flex-direction (row o column), justify-content (spaziatura lungo l'asse principale), align-items (allineamento sull'asse trasversale), flex-wrap e gap. Ad esempio, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } dispone un logo e dei link in una riga, centrati verticalmente, alle estremità opposte.
Come si centra un div con flexbox?
Rendi il genitore un contenitore flex e centra su entrambi gli assi: .parent { display: flex; justify-content: center; align-items: center; } — questo posiziona l'elemento figlio esattamente al centro orizzontalmente e verticalmente. Dai al genitore un'altezza (ad esempio min-height: 100vh per il centraggio a schermo intero). È il modo più pulito per centrare perfettamente un singolo elemento.
Qual è la differenza tra justify-content e align-items?
justify-content posiziona gli elementi lungo l'asse principale, mentre align-items li posiziona sull'asse trasversale. Con il flex-direction: row predefinito, justify-content distribuisce gli elementi orizzontalmente e align-items li allinea verticalmente. Passa a flex-direction: column e i due si invertono. La legenda degli assi in tempo reale nello strumento mostra quale è quale quando cambi direzione.
Cosa sono flex-grow, flex-shrink e flex-basis?
Sono le tre proprietà per elemento che decidono come si dimensiona un elemento flex, solitamente scritte insieme come proprietà abbreviata flex. flex-basis è la dimensione iniziale prima di condividere lo spazio libero. flex-grow indica quanto avidamente un elemento si espande per riempire lo spazio rimanente (0 = non crescere, 1 = prendere una quota). flex-shrink indica quanto prontamente si riduce quando lo spazio scarseggia. Il comune flex: 1 significa crescita uguale per tutti gli elementi.
Come faccio a far andare a capo gli elementi flex?
Imposta flex-wrap: wrap sul contenitore in modo che gli elementi che non stanno passino su una nuova riga invece di traboccare o schiacciarsi. Per impostazione predefinita flex-wrap è nowrap, forzando tutto su una riga. Con il wrapping attivo, dai agli elementi un flex-basis (come flex: 1 1 200px) affinché ogni riga si riempia in modo ordinato, e usa align-content per distribuire le righe risultanti.
Questo generatore flexbox è gratuito e privato?
Gratuito senza registrazione richiesta. L'intero playground funziona nel tuo browser — il tuo layout, il CSS generato e il link di condivisione vengono tutti costruiti sul tuo dispositivo e non vengono mai caricati su un server. Puoi metterlo tra i preferiti e usarlo offline dopo che la pagina è stata caricata. Nessun account da creare e nessun limite al numero di layout che puoi configurare.
Related tools
Vedi tutti gli strumenti
Novità Mixer di colori
Mescola due colori a qualsiasi proporzione e copia il risultato o qualsiasi passaggio.
Novità Selettore colori da immagine
Scegli qualsiasi colore da un’immagine ed estrai la palette dominante in HEX, RGB e HSL.
Novità Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novità Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Selettore e convertitore di colore
Scegli un colore e convertilo tra HEX, RGB, HSL e OKLCH.
Novità Verifica del contrasto dei colori
Controlla i rapporti di contrasto WCAG AA/AAA tra colore del testo e dello sfondo.