Generatore CSS Flexbox
Cambia le proprietà del contenitore e di ogni elemento e vedi subito come si dispongono. È il modo più rapido per capire flexbox senza scrivere codice alla cieca: quando il risultato ti convince, copia solo il CSS che hai modificato.
Elaborato al 100% nel tuo browser
Clicca un elemento nell’anteprima per modificarlo.
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Regola direzione, a capo, distribuzione e allineamento del contenitore.
- 2Scegli quanti elementi mostrare nell’anteprima.
- 3Premi un elemento per cambiare grow, shrink, basis, align-self e ordine.
- 4Copia il CSS generato.
Casi d’uso
- Centrare un elemento in orizzontale e in verticale.
- Costruire una barra di navigazione con link ben distribuiti.
- Creare una riga di card che va a capo su più righe sugli schermi piccoli.
- Imparare la differenza tra justify-content e align-items.
Domande frequenti
Che differenza c’è tra justify-content e align-items?
justify-content distribuisce gli elementi lungo l’asse principale (la riga, per impostazione predefinita) e align-items li allinea sull’asse trasversale. Se passi la direzione a colonna, gli assi si scambiano.
Come centro un elemento con flexbox?
Sul contenitore usa justify-content: center e align-items: center. Il contenitore deve avere un’altezza perché il centraggio verticale si veda.
Cosa significa flex: 1 1 auto?
Sono grow, shrink e basis: quanto l’elemento può crescere, quanto può ridursi e la sua dimensione di partenza prima di distribuire lo spazio rimasto.
Quando uso flexbox e quando grid?
Flexbox è ideale per disporre elementi in una sola dimensione, riga o colonna. Per griglie di righe e colonne insieme usa CSS Grid.