Tooloo

CSS / FRONTEND · FUNZIONA NEL TUO BROWSER

Generatore Flexbox CSS

Crea layout Flexbox in modo visuale, modifica ogni elemento, verifica il ritorno a capo e larghezze diverse, ed esporta CSS, HTML, Tailwind o un link da condividere.

Fino a 50 elementi e 50 passi di annullamento. Dimensioni e sfondo valgono solo per l'anteprima. I link condivisi includono nomi e impostazioni.

I link condivisi includono nomi e impostazioni. Evita dati sensibili.

Anteprima dal vivo

Asse principaleAsse trasversale

Dimensione dell'area: 0 × 0

Impostazioni anteprimaAutomatico × 360
Sfondo anteprima

Dimensioni e sfondo valgono solo per l'anteprima, non per il codice generato.

Al momento l'asse principale è orizzontale. Lo spazio rimanente sull'asse principale resta dopo gli elementi. Gli elementi restano su una sola riga; se lo spazio manca si restringono o escono dal contenitore.

rowflex-startstretchnowrap

  • NotaCon nowrap, align-content non ha effetto. Attiva il ritorno a capo per distribuire le righe.
Vedi la spiegazione dettagliata

flex-direction definisce l'asse principale. justify-content distribuisce lo spazio rimanente lungo quell'asse e align-items allinea sull'asse trasversale.

Grow distribuisce lo spazio libero positivo. Shrink agisce quando lo spazio manca, pesato sulla dimensione di base e limitato dalle dimensioni minime.

Trascina un elemento per riordinarlo, oppure usa i pulsanti sposta prima e sposta dopo.

Disposizione

Tipo di contenitoredisplay

Definisce se il contenitore è a blocco o in linea. I suoi figli usano sempre Flexbox.

Direzioneflex-direction

Sceglie la direzione e il bordo iniziale dell'asse principale.

Ritorno a capoflex-wrap

Controlla se gli elementi passano a una nuova riga quando manca spazio sull'asse principale.

Allineamento

Asse principalejustify-content

Controlla come si distribuisce lo spazio rimanente lungo l'asse principale.

Asse trasversalealign-items

Allinea gli elementi all'interno di ogni riga, lungo l'asse trasversale.

Più righealign-content

Distribuisce le righe lungo l'asse trasversale quando il ritorno a capo è attivo.

Spaziatura

gap

Spazio fisso tra elementi e righe adiacenti. Non viene aggiunto attorno al contenitore.

Impostazioni avanzate
Direzione di scritturadirection

Cambia il bordo iniziale in linea, invertendo anche l'asse principale di una riga.

padding

Spazio interno del contenitore. Compare sia nell'anteprima sia nel codice generato.

Codice generato

.flex-container {
  display: flex;
  gap: 16px;
}
Opzioni di output
Guida rapida a Flexbox

flex-direction definisce l'asse principale. justify-content distribuisce lo spazio rimanente lungo quell'asse e align-items allinea sull'asse trasversale.

justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: space-evenly

Grow distribuisce lo spazio libero positivo. Shrink agisce quando lo spazio manca, pesato sulla dimensione di base e limitato dalle dimensioni minime.

L'ordine visivo è diverso da quello del codice. Tastiera e screen reader possono seguire l'ordine dell'HTML.

Informazioni sullo strumento

Regoli il contenitore a sinistra e vedi il risultato a destra: l'anteprima si aggiorna mentre cambi direzione, allineamento o spaziatura, così ogni proprietà si capisce guardandola invece che leggendola. Ogni elemento si modifica singolarmente, con il proprio grow, shrink e dimensione di base, ed è lì che di solito nascono i comportamenti inattesi. Quando il risultato ti convince, copia il CSS, l'HTML o le classi Tailwind. Tutto avviene nel browser: niente viene caricato.

Come funziona

  1. Scegli un modello oppure parti dal contenitore vuoto.
  2. Regola direzione, allineamento e spaziatura e osserva l'anteprima.
  3. Seleziona un elemento per cambiarne grow, shrink, dimensione di base e ordine.
  4. Copia CSS, HTML o Tailwind, oppure condividi il link con le impostazioni.

Privacy

Il layout viene generato nel tuo browser: niente caricamenti né salvataggi automatici. Solo quando condividi esplicitamente, impostazioni e nomi finiscono nella parte # del link.

Domande frequenti

Perché il mio elemento non si restringe?
La dimensione minima automatica di un elemento flex è il suo contenuto, quindi un testo lungo o un'immagine possono impedirne la riduzione anche con shrink a 1. Prova a impostare min-width: 0 su quell'elemento e decidi poi come gestire il contenuto che esce.
Che differenza c'è tra align-items e align-content?
align-items allinea gli elementi all'interno di ogni riga; align-content distribuisce le righe fra loro e ha effetto solo quando il ritorno a capo è attivo e gli elementi occupano davvero più righe.

Strumenti correlati

← Tutti gli strumenti CSS / Frontend