Generatore di flexbox CSS
Cambia le opzioni e guarda gli elementi muoversi subito. Il codice qui sotto mostra solo ciò che hai cambiato rispetto al default.
Come si usaFlexbox senza imparare le proprietà a memoria
Disponibile in: 
Generatore di flexbox CSS: a cosa serve
Flexbox è il modo più usato per allineare elementi in una riga o in una colonna in CSS, ma i nomi delle proprietà confondono chi inizia.
Qui cambi ogni opzione con un selettore e vedi gli elementi muoversi subito: direzione, a capo, distribuzione sull’asse principale, allineamento sull’asse trasversale, align-content e spazio tra gli elementi. Il codice mostra solo ciò che è cambiato rispetto al default e avvisa quando una proprietà non ha effetto con le altre scelte.
Come si usa
- Scegli le opzioni di direzione, allineamento e a capo.
- Regola il gap, il numero di elementi e l’elemento che cresce.
- Copia il CSS del container.
Quando usarlo
- Centrare un elemento nello schermo.
- Creare un menu o una riga di pulsanti.
- Imparare flexbox in pratica.
Domande frequenti
Qual è la differenza tra justify-content e align-items?
justify-content distribuisce gli elementi sull’asse principale (in orizzontale, se la direzione è row) e align-items allinea sull’asse trasversale (in verticale, nello stesso caso). Se cambi la direzione in column, i due si scambiano gli assi.
Quando usare flexbox e quando usare grid?
Flexbox è per una dimensione: una riga di pulsanti, un menu, elementi che si sistemano in base allo spazio. Grid è per due dimensioni insieme, come una galleria o il layout della pagina. I due si possono usare insieme.
A cosa serve il gap?
Mette spazio tra gli elementi senza margini sui bordi, cosa che prima richiedeva margini e selettori come :last-child. Funziona con flexbox in tutti i browser attuali.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.