CSS Flexbox Generator

Generatore CSS Flexbox

Generatore CSS Flexbox gratuito: anteprima live, CSS e Tailwind in tempo reale, 10 layout predefiniti, avvisi contestuali ed export React/JSX. Senza registrazione.

Aggiornato giugno 2026

Layout Predefiniti
Contenitore
display flex
flex-direction row
flex-wrap nowrap
justify-content flex-start
align-items stretch
align-content stretch

Richiede flex-wrap: wrap

16px
Anteprima
3/8
Codice 
flex
gap-4
Override
16px
Raggio bordo
Elemento

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

Generatore CSS Flexbox Online — Builder Visuale con Output Tailwind

Crea layout CSS Flexbox visivamente e copia il codice in pochi secondi. Regola flex-direction, justify-content, align-items, gap e flex-grow — l'anteprima si aggiorna immediatamente. Nessuna configurazione, nessuna registrazione, nessuna installazione.

A differenza degli altri generatori, questo strumento mostra le classi Tailwind e il CSS vanilla contemporaneamente. Passa tra le schede Tailwind, CSS e React/JSX e copia il formato usato dal tuo progetto. Dieci layout predefiniti (Navbar, Centered Hero, Card Grid, Sidebar, Holy Grail e altri) ti permettono di partire da un pattern reale invece di zero.

Come Usare il Generatore CSS Flexbox

Costruire un layout flexbox richiede meno di un minuto:

  1. Scegli un preset — clicca su un preset nella galleria in cima (Navbar, Card Grid, Sidebar…) per caricare una configurazione completa. L'anteprima e il codice si aggiornano immediatamente.
  2. Regola le proprietà del contenitore — usa i controlli a sinistra per cambiare flex-direction, flex-wrap, justify-content, align-items, align-content e gap. L'anteprima riflette ogni modifica in tempo reale.
  3. Affina i singoli elementi — clicca su una casella colorata nell'anteprima (o sulle schede degli elementi) per modificare flex-grow, flex-shrink, flex-basis, align-self e order di quell'elemento.
  4. Copia il codice — passa tra le schede Tailwind, CSS o React nel pannello del codice e clicca su Copia o premi Shift+Invio. Usa il pulsante di download per salvare il file CSS.

Se una proprietà non ha effetto nella configurazione corrente — ad esempio, align-content quando flex-wrap è impostato su nowrap — un avviso contestuale spiega esattamente perché e come risolvere.

Esempi CSS Flexbox

Output reali del generatore per pattern di layout comuni:

Navbar (space-between, center)

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Tailwind: flex justify-between items-center gap-4

Hero centrato (entrambi gli assi)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Tailwind: flex justify-center items-center

Griglia di card con a capo automatico

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Tailwind: flex flex-wrap gap-4

Cos'è CSS Flexbox?

CSS Flexible Box Layout (Flexbox) è un modello di layout unidimensionale — dispone gli elementi in una singola riga o colonna. A differenza dei metodi di layout precedenti, Flexbox offre un controllo preciso su come gli elementi crescono, si riducono e si allineano, anche quando le loro dimensioni sono sconosciute o dinamiche.

Flexbox opera su due assi: l'asse principale (definito da flex-direction) e l'asse trasversale (perpendicolare al principale). justify-content controlla l'allineamento sull'asse principale; align-items sull'asse trasversale. Questa distinzione è la fonte di confusione più comune per gli sviluppatori — ed è per questo che gli avvisi contestuali sono così preziosi.

Casi d'Uso Comuni

  • Barre di navigazione: flex, justify-content: space-between, align-items: center — il pattern classico per logo a sinistra e link a destra.
  • Centrare un elemento: display: flex; justify-content: center; align-items: center sul contenitore padre con altezza definita. Il modo più veloce per centrare un div.
  • Righe di card: flex, flex-wrap: wrap, gap — le card si allineano in una riga e vanno a capo quando il viewport è troppo stretto.
  • Sidebar + contenuto: flex, flex-wrap: nowrap, align-items: stretch — un elemento stretto fisso e uno che cresce per riempire lo spazio rimanente (flex-grow: 1).
  • Campi di form in linea: flex, align-items: center, gap — label e input sulla stessa riga con allineamento verticale coerente.
  • Gruppi di pulsanti: flex, flex-wrap: wrap, justify-content: flex-end, gap — i pulsanti vanno a capo su schermi piccoli.

Flexbox vs. CSS Grid: Quando Usare Ciascuno?

Usa Flexbox per layout unidimensionali — una riga di pulsanti, una navbar, l'allineamento all'interno di un componente. Usa Grid per layout bidimensionali — quando devi controllare righe E colonne contemporaneamente, come la struttura completa di una pagina.

La maggior parte dei design moderni usa Grid per il macro-layout della pagina e Flexbox all'interno di ogni componente o sezione.

Domande Frequenti

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

justify-content controlla l'allineamento sull'asse principale — orizzontale quando flex-direction è row, verticale quando è column. align-items controlla l'asse trasversale (la direzione perpendicolare). Per centrare un elemento su entrambi gli assi: display: flex; justify-content: center; align-items: center sul contenitore padre con un'altezza definita.

Perché align-content non funziona nel mio layout Flexbox?

align-content ha effetto solo quando due condizioni sono soddisfatte: (1) flex-wrap è impostato su wrap o wrap-reverse, e (2) gli elementi si sono effettivamente distribuiti su più righe. In un contenitore a riga singola — il flex-wrap: nowrap predefinito — align-content non ha alcun effetto visivo. Il generatore mostra un avviso quando imposti align-content con nowrap attivo.

Cosa significa flex: 1 in CSS?

flex: 1 è un'abbreviazione per flex: 1 1 0% — l'elemento può crescere (flex-grow: 1), può ridursi (flex-shrink: 1) e inizia con una dimensione base di zero (flex-basis: 0%). Quando più elementi hanno flex: 1, si condividono lo spazio disponibile in parti uguali — il pattern più comune per colonne di uguale larghezza.

Come centrare un div verticalmente e orizzontalmente con Flexbox?

Sul contenitore padre: display: flex; justify-content: center; align-items: center. Il contenitore deve avere un'altezza definita — un valore fisso, height: 100vh, o ereditare l'altezza dal proprio padre. Senza altezza definita, il centramento verticale non ha spazio su cui operare.

Il generatore esporta classi Tailwind CSS?

Sì — e mostra Tailwind e CSS vanilla contemporaneamente. Passa tra le schede Tailwind, CSS e React nel pannello del codice. L'output Tailwind usa classi di utilità standard (flex, justify-between, items-center, gap-4, ecc.). Per valori di gap fuori dalla scala predefinita di Tailwind, il generatore usa la sintassi del valore arbitrario: gap-[20px].

Risorse

Strumenti correlati