Generatore CSS Flexbox
Generatore CSS Flexbox gratuito: anteprima live, export Tailwind, CSS e React/JSX in schede, 11 layout predefiniti e proprietà dei singoli elementi incluse nel codice. Senza registrazione.
Aggiornato giugno 2026
Revisionato da Rafael Duarte
Richiede flex-wrap: wrap
flex
gap-4Clicca su un elemento nell'anteprima per modificarne le proprietà.
Come usare il generatore CSS Flexbox
Da un layout predefinito al codice in meno di un minuto
1. Parti da un layout
Navbar, Centered, Card Grid, Sidebar, Stack e altri: undici preset che impostano subito il contenitore.
2. Regola il contenitore
Cambia flex-direction, flex-wrap, justify-content, align-items, align-content e gap guardando l'anteprima dal vivo.
3. Copia il codice
Passa tra le schede Tailwind, CSS e React, copia con un clic o scarica il file flexbox.css.
Cosa fa il generatore Flexbox
Proprietà del contenitore, anteprima e codice in tre formati
Tailwind, CSS e React
Lo stesso layout in classi Tailwind, in una regola .container o in un oggetto di stile JSX: cambi formato con una scheda.
Undici layout predefiniti
Navbar, Centered, Card Grid, Sidebar, Holy Grail, Footer, Form Row, Stack, Icon+Label, Pill Btns e App Shell.
Preset App Shell
Genera blocchi separati per wrapper di pagina, navbar, riga centrale, sidebar e contenuto: la struttura classica di un'applicazione web.
Avviso su align-content
Se align-content non può avere effetto perché flex-wrap è nowrap, lo strumento lo segnala e spiega come attivarlo.
Sperimentazione sui singoli elementi
Clicca un elemento dell'anteprima (fino a 8) per provare flex-grow, flex-shrink, flex-basis, align-self e order.
Anteprima mobile, tablet e desktop
Restringi l'anteprima a 375 px o 768 px per vedere come si comporta il layout senza ridimensionare la finestra.
Esempi di codice Flexbox
Il CSS del contenitore generato da alcuni preset
Quando usare Flexbox
I layout più comuni in una dimensione
Barre di navigazione
justify-content: space-between e align-items: center: logo a sinistra, link a destra, tutto allineato in verticale.
Centrare un div
justify-content: center più align-items: center centra un elemento in orizzontale e in verticale.
Righe di card che vanno a capo
Con flex-wrap: wrap e gap le card scendono alla riga successiva quando lo schermo si restringe.
Etichetta e campo sulla stessa riga
Il preset Form Row allinea etichetta, input e pulsante al centro con uno spazio uniforme di 8 px.
Struttura di un'applicazione
App Shell fornisce navbar fissa, sidebar e area contenuti scorrevole, pronte da incollare.
Errori comuni con Flexbox
Confondere justify-content e align-items
justify-content lavora sull'asse principale (orizzontale con row, verticale con column); align-items sull'asse trasversale. Cambiando direzione, i due si scambiano.
Elementi che non si restringono
Per impostazione predefinita un elemento flex ha min-width: auto e non scende sotto la larghezza del suo contenuto, anche con flex-shrink. Aggiungi min-width: 0 all'elemento per evitare lo sforamento.
Dimenticare le classi dei figli
Le proprietà modificate sui singoli elementi escono nel codice come regole .item-N (N = posizione nell'anteprima). Assegna quelle classi ai figli giusti nel tuo HTML, altrimenti valgono solo le regole del contenitore.
Usare order cambiando l'ordine logico
order sposta gli elementi solo visivamente: lettori di schermo e tasto Tab seguono ancora l'ordine dell'HTML.
Perché usare questo generatore Flexbox
Lo stesso layout è disponibile in Tailwind, CSS e React, e l'anteprima mostra subito l'effetto di ogni proprietà, anche a larghezza smartphone o tablet. L'avviso su align-content evita uno degli errori più comuni con flex-wrap.
Gli undici preset coprono i layout che si scrivono più spesso, dalla navbar alla struttura completa di un'app. Tutto avviene nel browser, senza registrazione.
Flexbox o CSS Grid?
Quando scegliere l'uno o l'altro
Domande frequenti
justify-content distribuisce gli elementi lungo l'asse principale, align-items li allinea sull'asse trasversale. Con flex-direction: row il primo agisce in orizzontale e il secondo in verticale; con column succede il contrario.
Riferimenti
Assi, contenitore ed elementi flex spiegati passo per passo (in inglese).
La guida illustrata più consultata su tutte le proprietà Flexbox (in inglese).
La specifica ufficiale che definisce il comportamento di ogni proprietà (in inglese).
Strumenti correlati
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
