Generatore CSS Flexbox

Playground visuale per creare layout flexbox con anteprima dal vivo

Proprieta del Contenitore

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px) 10

Numero di Elementi 4

Proprieta dell'Elemento

Seleziona Elemento

order

flex-grow

flex-shrink

flex-basis

align-self

Preset di Layout

Anteprima dal Vivo

CSS Generato

Tutta l'elaborazione avviene nel tuo browser. Nessun dato viene inviato a nessun server.

Esempi di Utilizzo

Centrare il Contenuto

Centra perfettamente il contenuto orizzontalmente e verticalmente con flexbox.

Layout Barra Laterale

Crea un layout classico barra laterale + contenuto principale con flexbox.

Griglia di Card

Costruisci una griglia di card responsive con wrapping e spaziatura uguale.

Funzionalita

Anteprima Visuale dal Vivo

Vedi il tuo layout flexbox aggiornarsi in tempo reale

Codice CSS Pronto all'Uso

Ottieni codice CSS pulito e pronto da copiare per contenitore ed elementi

Preset di Layout

Inizia rapidamente con preset di layout comuni

Controlli Per Elemento

Configura proprieta individuali come order, flex-grow e align-self

Come Usare?

Imposta Proprieta del Contenitore

Scegli i valori di flex-direction, justify-content, align-items, flex-wrap e gap.

Regola gli Elementi

Imposta il numero di elementi e configura le proprieta individuali.

Copia il CSS

Copia il codice CSS generato e usalo nel tuo progetto.

CSS Flexbox Cheat Sheet

Riferimento rapido per tutte le proprieta Flexbox

Proprieta del Contenitore

Proprieta	Valori
`display`	flex \| inline-flex
`flex-direction`	row \| row-reverse \| column \| column-reverse
`flex-wrap`	nowrap \| wrap \| wrap-reverse
`flex-flow`	(shorthand)
`justify-content`	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly
`align-items`	stretch \| flex-start \| flex-end \| center \| baseline
`align-content`	flex-start \| flex-end \| center \| space-between \| space-around \| stretch
`gap`	(sets row-gap and column-gap)
`row-gap`
`column-gap`

Proprieta dell'Elemento

Proprieta	Valori
`order`	(default: 0)
`flex-grow`	(default: 0)
`flex-shrink`	(default: 1)
`flex-basis`	\| auto (default: auto)
`flex`	(shorthand)
`align-self`	auto \| flex-start \| flex-end \| center \| baseline \| stretch

Domande Frequenti

Flexbox è ideale per layout monodimensionali — disporre elementi in una singola riga o colonna. Usa CSS Grid quando hai bisogno di controllare sia le righe che le colonne contemporaneamente, come nei layout di pagina complessi.

justify-content allinea gli elementi flex lungo l'asse principale (orizzontale di default), mentre align-items li allinea lungo l'asse trasversale (verticale di default). Ad esempio, justify-content: center centra gli elementi orizzontalmente, e align-items: center li centra verticalmente.

flex-grow determina quanto un elemento flex cresce rispetto ai fratelli quando è disponibile spazio extra. Un valore di 1 significa che l'elemento occupa tutto lo spazio rimanente. Se due elementi hanno entrambi flex-grow: 1, lo spazio extra viene diviso equamente tra loro.

Imposta flex-wrap: wrap sul contenitore flex. Di default, flex-wrap è nowrap, che forza tutti gli elementi su una sola riga. Con wrap, gli elementi fluiscono su una nuova riga quando finisce lo spazio.

flex è l'abbreviazione per flex-grow, flex-shrink e flex-basis insieme. Ad esempio, flex: 1 1 auto significa che l'elemento può crescere, può rimpicciolirsi e ha una dimensione di base automatica. flex: 1 è una comune abbreviazione per flex: 1 1 0.

Aggiungi display: flex, justify-content: center e align-items: center al contenitore. Questo centra il figlio sia orizzontalmente che verticalmente. Usa il preset "Centered" in questo generatore per applicarlo istantaneamente.

Sì. Seleziona qualsiasi elemento nel generatore e regola il suo order, flex-grow, flex-shrink, flex-basis e align-self indipendentemente dal resto.

No. Tutto avviene nel tuo browser. Nulla viene caricato o archiviato da nessuna parte.

Cos'e il Generatore CSS Flexbox?

Il Generatore Flexbox e un'area di gioco visuale dove configuri le proprieta del contenitore flex e degli elementi, e vedi il risultato istantaneamente. Basta indovinare come appare justify-content: space-between. Regola, anteprima, copia il CSS.

Funzionalita principali

Controllo completo sulle proprieta del contenitore come flex-direction, wrap, justify-content, align-items e gap. Controlli individuali per order, grow, shrink, basis e align-self. Preset di layout (centrato, barra laterale, holy grail, navbar, griglia card, footer) per iniziare in un clic.

Casi d'uso comuni

Centrare contenuto verticalmente e orizzontalmente, costruire barre di navigazione, creare griglie di card responsive con wrapping e costruire layout classici con barra laterale. Flexbox gestisce questi pattern elegantemente con CSS minimo.

Consigli

Inizia da un preset e modifica da li. Usa gap invece dei margini tra gli elementi flex per codice piu pulito. Ricorda che flex-wrap: wrap e il tuo migliore amico per i design responsive.

Privacy

Tutto funziona nel tuo browser. Nessun dato di layout lascia il tuo computer.

Sicurezza e Privacy

La sicurezza dei vostri dati è la nostra priorità

Elaborazione Locale

Tutta l'elaborazione avviene nel vostro browser

Nessun Trasferimento Dati

I vostri dati non vengono inviati ai nostri server

Nessun Archiviazione Dati

Nessun dato viene memorizzato o condiviso

Crittografia SSL

Crittografia SSL per connessione sicura

Passo Successivo

Generatore CSS Grid

Playground visuale CSS Grid con anteprima dal vivo e generazione codice

Generatore di Tabelle HTML

Costruttore visuale di tabelle HTML con anteprima dal vivo

Questo strumento ti è stato utile?

Generatore CSS Flexbox

Proprieta del Contenitore

Proprieta dell'Elemento

Preset di Layout

Anteprima dal Vivo

CSS Generato

Esempi di Utilizzo

Centrare il Contenuto

Layout Barra Laterale

Griglia di Card

Funzionalita

Anteprima Visuale dal Vivo

Codice CSS Pronto all'Uso

Preset di Layout

Controlli Per Elemento

Come Usare?

Imposta Proprieta del Contenitore

Regola gli Elementi

Copia il CSS

CSS Flexbox Cheat Sheet

Proprieta del Contenitore

Proprieta dell'Elemento

Domande Frequenti

Quando dovrei usare Flexbox invece di Grid?

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

Cosa fa flex-grow?

Come faccio a far passare gli elementi flex alla riga successiva?

Cos'è la proprietà abbreviata (shorthand) flex?

Come posso centrare perfettamente il contenuto con Flexbox?

Posso personalizzare i singoli elementi flex?

Questo strumento invia dati a un server?

Cos'e il Generatore CSS Flexbox?

Funzionalita principali

Casi d'uso comuni

Consigli

Privacy

Sicurezza e Privacy

Elaborazione Locale

Nessun Trasferimento Dati

Nessun Archiviazione Dati

Crittografia SSL

CSS Flexbox vs Grid: Quale sistema di layout usare?

Passo Successivo

Generatore CSS Grid

Generatore di Tabelle HTML

Strumenti correlati

Verificatore Contrasto Colori

Generatore di Gradienti CSS

Generatore di Meta Tag

Formattatore JSON

Controllo Diff Codice

Generatore di Regole di Riscrittura