Generatore di CSS Flexbox

Come usare

1. Definisci le proprietà del contenitore: configura il contenitore flex, flex-direction, justify-content, align-items, flex-wrap e gap.
2. Aggiungi e configura gli elementi flex: aggiungi elementi figli e definisci flex-grow, flex-shrink, flex-basis, align-self e order individualmente.
3. Copia il CSS: ottieni il CSS completo per il contenitore e gli elementi, pronto da usare nel tuo progetto.

Perché usare il generatore Flexbox?

Flexbox è lo strumento essenziale per un layout CSS monodimensionale, allineare elementi in riga o colonna con potenti controlli di distribuzione e allineamento. Ma le proprietà sono numerose e le loro interazioni complesse: justify-content contro align-items, flex-grow contro flex-basis, asse principale contro asse trasversale. Questo generatore interattivo fornisce un feedback visivo immediato quando modifichi ogni proprietà, rendendolo il modo più rapido per imparare Flexbox e ottenere il CSS adatto al tuo layout.

Funzionalità

• Anteprima interattiva: trascina gli elementi flex e attiva le proprietà per vedere le modifiche in tempo reale.
• Tutte le proprietà del contenitore: flex-direction, flex-wrap, justify-content, align-items, align-content e gap.
• Controllo per elemento: definisci flex-grow, flex-shrink, flex-basis, align-self e order individualmente per ogni elemento.
• Indicatori d'asse visivi: l'asse principale e l'asse trasversale sono evidenziati per rafforzare il modello concettuale.
• Output CSS: CSS completo, pronto da copiare, per il contenitore e tutti gli elementi configurati.

Domande frequenti

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

justify-content distribuisce gli elementi lungo l'asse principale (orizzontale per impostazione predefinita). align-items allinea gli elementi lungo l'asse trasversale (verticale per impostazione predefinita). Quando flex-direction vale column, gli assi si invertono, justify-content diventa verticale e align-items diventa orizzontale.

Quando usare Flexbox o CSS Grid?

Usa Flexbox per layout monodimensionali, una fila di pulsanti, una barra di navigazione, una lista di card che devono andare a capo. Usa CSS Grid per layout bidimensionali dove devi controllare righe e colonne contemporaneamente, come un layout completo o una griglia di card complessa.

Cosa significa flex: 1?

flex: 1 è una scorciatoia per flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Indica all'elemento di crescere per riempire lo spazio disponibile, di restringersi se necessario, e di partire da zero prima di distribuire lo spazio. Tutti gli elementi con flex: 1 si dividono equamente lo spazio.

Cosa fa davvero Flexbox

Flexbox (Flexible Box Layout) è un modello di layout CSS progettato per distribuire spazio e allineare elementi in una direzione monodimensionale: una riga o una colonna. Introduce due concetti centrali che determinano come si comporta tutto: l'asse principale (la direzione primaria in cui scorrono gli elementi, orizzontale per default) e l'asse trasversale (perpendicolare all'asse principale, verticale per default). Una volta interiorizzato principale vs trasversale, ogni proprietà Flexbox si mappa su uno di essi: justify-content lavora sull'asse principale, align-items lavora sull'asse trasversale, flex-direction scambia quale asse è quale.

Flexbox ha risolto un insieme di problemi di layout che affliggevano gli sviluppatori web dal 1998 al 2014. Prima di Flexbox, centrare verticalmente un elemento richiedeva hack (display: table-cell, margini negativi, position: absolute con trasformazioni translate). Colonne di altezza uguale richiedevano la tecnica delle false colonne con immagini di sfondo. I footer sticky avevano bisogno di calcoli precisi al pixel. Flexbox ha reso tutto questo banale: una dichiarazione su una riga sostituisce decenni di workaround CSS. Il compromesso è che Flexbox è monodimensionale; per layout bidimensionali (riga E colonna simultaneamente), CSS Grid (rilasciato nel 2017) è lo strumento migliore.

Le proprietà Flexbox si dividono chiaramente in due gruppi: proprietà del contenitore (applicate al genitore: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) e proprietà degli elementi (applicate ai figli: flex-grow, flex-shrink, flex-basis, align-self, order). Le proprietà del contenitore controllano i pattern di layout; le proprietà degli elementi controllano le eccezioni individuali. Questo generatore espone entrambi i set così puoi sperimentare come interagiscono senza scrivere codice.

Come funziona questo strumento sotto il cofano

L'anteprima in tempo reale è un contenitore flex con elementi figlio di esempio. Mentre cambi le proprietà del contenitore (flex-direction, justify-content, ecc.) tramite menu a tendina e input, JavaScript aggiorna lo stile inline del contenitore di anteprima e il browser ri-renderizza il layout. L'anteprima è l'effettiva implementazione Flexbox del browser, non una simulazione JavaScript: vedi esattamente cosa produrrà il tuo CSS su una pagina reale.

I controlli per elemento ti permettono di regolare ogni figlio individualmente. Puoi aggiungere o rimuovere elementi, impostare i loro valori di flex-grow, flex-shrink, flex-basis, align-self e order, e vedere come il contenitore ridistribuisce lo spazio di conseguenza. Gli indicatori visivi degli assi mostrano gli assi principale e trasversale per la configurazione corrente, rafforzando il modello mentale. Le proprietà sono CSS reale che puoi copiare direttamente nel tuo foglio di stile, senza bisogno di transpilazione o prefissi framework.

Il pannello CSS Generato si aggiorna a ogni interazione, producendo due regole CSS: una per il contenitore (con le proprietà flex scelte) e una per gli elementi. Clicca Copia CSS e le regole vengono scritte sulla tua clipboard. Lo strumento stesso non fa mai richieste di rete; il rendering dell'anteprima, la generazione del codice e la scrittura sulla clipboard avvengono tutti in JavaScript sul tuo dispositivo. Ricarica la pagina e la tua configurazione è sparita, a meno che tu non abbia copiato il CSS prima.

Breve storia di Flexbox

• Caos di layout CSS 2.1, dal 1998 al 2008.Prima di Flexbox, gli sviluppatori web usavano float: left con hack clearfix, display: inline-block con bug di whitespace, o display: table con trucchi table-cell per il layout. Il centraggio verticale richiedeva vertical-align sulle table-cell, trucchi con margini negativi o posizionamento assoluto. Colonne uguali richiedevano JavaScript. La comunità web genera migliaia di post di blog sui workaround tipo come fare X con CSS.
• Prima bozza di Flexible Box, 2009.Il W3C CSS Working Group pubblica la prima Working Draft del CSS Flexible Box Layout Module nel luglio 2009, con tre sintassi che evolvono nei cinque anni successivi: la sintassi originale box-* (rapidamente deprecata), la sintassi intermedia flexbox del 2011 (ancora visibile nel codice legacy IE 10) e la sintassi finale flex che usiamo oggi.
• Il supporto dei browser si stabilizza, 2014.Chrome 29, Firefox 28, Safari 9 e IE 11 spediscono tutti Flexbox funzionante entro il 2014, con IE 11 che mantiene casi limite buggy. La transizione da Flexbox è il futuro a Flexbox è il presente avviene nel 2014-2015 quando i siti di produzione lo adottano per i layout principali. L'Holy Grail Layout (header, footer, due sidebar, contenuto principale) diventa banale.
• Guida Completa a Flexbox di Chris Coyier, 2013.CSS-Tricks pubblica la guida Flexbox completa di Chris Coyier (aprile 2013), che diventa il riferimento canonico. Entro il 2016, la guida è tra i primi risultati per qualsiasi domanda Flexbox ed è tradotta in dozzine di lingue. Accelera drammaticamente l'adozione di Flexbox.
• CSS Grid arriva come complemento, 2017.CSS Grid Layout spedisce in Chrome 57, Firefox 52 e Safari 10.1 (marzo 2017). Lungi dal sostituire Flexbox, Grid lo completa: Flexbox eccelle nei layout monodimensionali riga/colonna, Grid eccelle nei layout bidimensionali. I design moderni tipicamente usano entrambi: Grid per la struttura a livello di pagina, Flexbox per gli arrangiamenti interni dei componenti (elementi nav, gruppi di pulsanti, contenuto delle card).
• La proprietà gap e il subgrid arrivano, dal 2020 al 2024.La proprietà gap (originariamente solo Grid) diventa compatibile con Flexbox in tutti i browser principali entro Safari 14.1 (aprile 2021). La sintassi più pulita gap: 1rem sostituisce i pattern più vecchi tipo margine su ogni figlio tranne l'ultimo. CSS Subgrid (2023+) permette ai grid annidati di allinearsi con le track del grid genitore, utile per i layout dei design system.

Flussi di lavoro reali

• Barre di navigazione.Una nav orizzontale con logo a sinistra e link a destra è il caso d'uso canonico di Flexbox. display: flex; justify-content: space-between; align-items: center; sul contenitore nav, e hai finito. Aggiungi gap: 1.5rem per spaziatura tra i link. Questo CSS di 4 righe sostituisce ciò che richiedeva float, clearfix e matematica perfetta dei margini.
• Centraggio verticale e orizzontale.La classica domanda come centro questo div? ha una risposta Flexbox: display: flex; justify-content: center; align-items: center; sul genitore. Funziona indipendentemente dalla dimensione intrinseca del figlio, indipendentemente dall'altezza del genitore, indipendentemente dai cambiamenti dinamici del contenuto. Questo è il singolo più grande miglioramento di qualità della vita che Flexbox ha portato allo sviluppo web.
• Layout a lista di card con wrapping.Una fila di card che si avvolge su più righe sugli schermi stretti: display: flex; flex-wrap: wrap; gap: 1rem; sul contenitore e flex: 1 1 250px su ogni card. Le card crescono per riempire lo spazio disponibile, si restringono fino a un minimo di 250px e si avvolgono su nuove righe quando 250px non basta. Design responsive senza media query.
• Righe di moduli con input etichettati.I moduli spesso hanno bisogno di etichette e input allineati: display: flex; gap: 0.5rem; sulla riga, flex: 0 0 120px sull'etichetta (larghezza fissa di 120px), flex: 1 sull'input (riempie lo spazio rimanente). Ridimensionare il contenitore del modulo mantiene l'etichetta fissa e allunga l'input. Più facile di CSS Grid per le righe di moduli a due colonne.
• Footer sticky.Far attaccare il footer al fondo del viewport quando il contenuto è corto, ma seguire il contenuto quando è lungo: body { display: flex; flex-direction: column; min-height: 100vh; } con main { flex: 1 } spinge il footer verso il basso. Il classico problema del sticky footer risolto in tre dichiarazioni CSS, sostituendo i workaround con margini negativi degli anni 2010.
• Gruppi di tag e badge.Liste di tag, chip o badge che dovrebbero scorrere orizzontalmente e avvolgersi su nuove righe: display: flex; flex-wrap: wrap; gap: 0.5rem;. Ogni tag si dimensiona da solo e il contenitore gestisce la disposizione. Usato molto nelle UI di filtraggio, taggatura di contenuti, interfacce di ricerca. Si combina bene con il selettore :has() per styling dipendente dallo stato.

Trappole comuni e cosa significano

• La trappola min-width: auto.Gli elementi flex hanno un implicito min-width: auto (o min-height: auto per direzioni colonna) che impedisce loro di restringersi sotto la dimensione minima intrinseca del loro contenuto. Questo fa fallire inaspettatamente i pattern overflow: hidden e text-truncation all'interno dei contenitori flex. Soluzione: imposta esplicitamente min-width: 0 sull'elemento flex problematico. Questa è la causa singola più comune del perché il mio layout flex è rotto?.
• Confusione tra flex-basis e width.flex-basis è la dimensione iniziale di un elemento flex lungo l'asse principale, prima dei calcoli di grow/shrink. width (o height per direzioni colonna) è la regolare dimensione CSS. Quando entrambe sono impostate, vince flex-basis. La shorthand flex: 1 1 200px imposta flex-basis a 200px. Per la maggior parte dei casi, preferisci flex-basis a width all'interno di contenitori flex per chiarezza.
• Supporto di gap nei browser più vecchi.La proprietà gap era originariamente solo per Grid ed è arrivata in Flexbox più di recente: Safari 14.1 (aprile 2021) e prima in Chrome/Firefox. Per progetti che supportano vecchio Safari (o vecchio WebView nelle app iOS), fornisci fallback usando margini sui figli. La maggior parte dei progetti moderni può usare gap in sicurezza; controlla i tuoi specifici target di supporto browser.
• Il flex-shrink di default può causare dimensionamenti inaspettati.Gli elementi flex di default sono flex-shrink: 1, il che significa che possono restringersi sotto la loro larghezza dichiarata se il contenitore è troppo stretto. Per mantenere un elemento alla sua larghezza dichiarata indipendentemente dallo spazio disponibile, imposta flex-shrink: 0. Comune con le sidebar che dovrebbero rimanere a 250px di larghezza anche quando l'area di contenuto principale le spinge: flex: 0 0 250px invece di flex-basis: 250px.
• flex-basis percentuale è relativo al contenitore.flex-basis: 50% significa 50% della dimensione dell'asse principale del contenitore flex. Funziona per layout tipici ma interagisce stranamente con flex-wrap: se il contenitore stesso ha una dimensione dell'asse principale basata su percentuale in un contesto flex annidato, la matematica si complica. Nel dubbio, usa valori in pixel o min()/max()/clamp() per flex-basis invece di percentuali.
• Flexbox di IE 11 ha casi limite buggy.Internet Explorer 11 (ritirato giugno 2022) ha implementato Flexbox con diversi bug: min-height non rispettato, contenitori flex annidati rotti, flex: 1 a volte trattando flex-basis come 0px invece di 0%, la shorthand flex a due valori gestita in modo incoerente. Per progetti che non supportano più IE, ignora. Per software enterprise legacy, testa approfonditamente o usa approcci di layout alternativi.

Privacy: tutto gira nel tuo browser

Gli strumenti di apprendimento e layout CSS arrivano in due varianti: semplici pagine HTML che eseguono JavaScript lato client (private, veloci, senza setup) ed editor cloud con progetti salvati (collaborativi ma con compromessi di privacy). Questo strumento è del primo tipo. Le tue selezioni di proprietà, le tue configurazioni di elementi, il tuo CSS generato: tutto resta nella tua sessione browser. Ricarica la pagina e lo stato è sparito a meno che tu non abbia copiato il CSS prima.

Le poste in gioco della privacy sono basse qui perché le configurazioni Flexbox raramente contengono informazioni sensibili. Comunque, la mancanza di analytics conta: puoi sperimentare liberamente senza che il tuo processo di prova ed errore venga registrato. Particolarmente utile in contesti di classe o di formazione aziendale dove avere studenti o tirocinanti che registrano account su piattaforme di terze parti è un punto di attrito. Lo strumento è una singola pagina statica senza backend, utilizzabile in qualsiasi browser, comprese le macchine enterprise bloccate.

Quando un altro strumento è la scelta giusta

• CSS Grid per layout bidimensionali.Flexbox è monodimensionale; se hai bisogno di allineare elementi in entrambe righe e colonne simultaneamente (ad esempio, un layout in stile rivista con card di dimensioni miste), CSS Grid è drammaticamente più adatto. Usa il nostro CSS Grid Generator per quel tipo di lavoro. I due funzionano benissimo insieme: Grid per la struttura a livello di pagina, Flexbox per gli arrangiamenti interni dei componenti.
• Tabelle HTML per dati tabellari.Se i tuoi dati sono effettivamente una tabella (righe che rappresentano record, colonne che rappresentano campi), usa un vero elemento con e

  . Le tabelle forniscono significato semantico agli screen reader, intestazioni ordinabili e allineamento integrato. Flexbox/Grid per tabelle è un antipattern dell'era 2010; le moderne linee guida di accessibilità raccomandano esplicitamente tabelle HTML semantiche per dati tabellari. position: absolute per overlay e tooltip.Overlay modali, tooltip, menu dropdown ed elementi UI fluttuanti simili funzionano meglio con position: absolute o position: fixed piuttosto che Flexbox. Flex/Grid gestiscono il flusso del layout; il posizionamento assoluto solleva gli elementi completamente fuori dal flusso. Combinali: Flexbox per il layout principale della pagina, posizionamento assoluto per il modale che lo sovrappone. CSS Subgrid per allineamento annidato.Quando i layout annidati hanno bisogno di allinearsi con il grid del genitore (ad esempio, titoli di card tutti allineati attraverso una griglia di card), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) è più appropriato del Flexbox annidato. Subgrid permette ai figli di ereditare le track del grid dal genitore, garantendo un allineamento perfetto attraverso strutture annidate. Vale la pena impararlo per il lavoro su componenti di design system. Altre domande frequenti Cosa significa esattamente la shorthand flex? La shorthand flex imposta tre proprietà in una volta: flex: . Valori comuni: flex: 1 (1, 1, 0%) per elementi a distribuzione uguale, flex: 0 0 auto per elementi a dimensione fissa, flex: 1 1 250px per elementi che crescono/si restringono da un punto di partenza di 250px. La shorthand ha valori iniziali speciali quando sono forniti solo uno o due valori; la forma esplicita a tre valori evita sorprese. Come faccio ad avvolgere gli elementi su più righe? Imposta flex-wrap: wrap sul contenitore. Gli elementi vanno a capo su una nuova riga quando non entrano. Combina con flex-basis sugli elementi per controllare quanti entrano per riga: flex: 1 1 200px crea una griglia responsive dove gli elementi sono almeno 200px, crescono per riempire lo spazio rimanente e si avvolgono su nuove righe su schermi stretti. La proprietà gap del contenitore gestisce la spaziatura tra righe avvolte ed elementi. Posso invertire l'ordine degli elementi flex? Sì, in molti modi. A livello di contenitore: flex-direction: row-reverse (o column-reverse) inverte tutti gli elementi nell'ordine. A livello di elemento: la proprietà order assegna pesi numerici; gli elementi con numeri più bassi appaiono prima. L'ordine di default è 0; impostare order: -1 su un elemento lo sposta in primo piano. Nota sull'accessibilità: il riordinamento visivo non influenza l'ordine di tab o l'ordine di lettura degli screen reader, il che può confondere gli utenti di tastiera e tecnologie assistive. Usa con parsimonia. Qual è la differenza tra align-items e align-content? align-items allinea gli elementi all'interno della loro riga (o colonna) lungo l'asse trasversale. align-content allinea le righe (o colonne) stesse all'interno del contenitore, ha senso solo quando ci sono più righe avvolte. Se flex-wrap è impostato a nowrap (il default), align-content non ha effetto perché c'è solo una riga. Usa align-items per allineamento a riga singola, align-content per allineamento multi-riga. Come centro un singolo elemento con Flexbox? La risposta classica: display: flex; justify-content: center; align-items: center; sul contenitore genitore. Questo centra il figlio sia orizzontalmente che verticalmente. Solo per orizzontale: usa justify-content: center da solo. Solo per verticale: usa align-items: center da solo. Se hai bisogno di centrare dentro un genitore di altezza sconosciuta, aggiungi min-height: 100vh al genitore così ha spazio verticale per centrare. L'intero pattern sostituisce 20 anni di workaround di centraggio CSS. Perché la troncatura del testo non funziona nel mio contenitore flex? A causa del default min-width: auto sugli elementi flex. Text-overflow: ellipsis richiede che l'elemento effettivamente fuoriesca dal suo contenitore; con la larghezza minima di default impostata alla dimensione intrinseca del contenuto, l'elemento non fuoriesce mai. Soluzione: aggiungi min-width: 0 all'elemento flex contenente il testo da troncare. Questo è il bug Flexbox più comune nelle risposte Stack Overflow di sempre: cercare flex text-overflow ellipsis not working restituisce migliaia di versioni di questa esatta risposta. Strumenti correlati 🎨 Gradiente CSS 🖼️ Box-shadow ⬜ Border-radius 📐 Unità CSS