Generatore Flexbox
Regola un contenitore Flexbox dal vivo e copia il CSS pronto all’uso.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Padroneggia Flexbox senza tentativi
Scegli direzione, allineamento, a capo e spaziatura: l’anteprima si aggiorna dal vivo e il CSS del contenitore è pronto da copiare.
-
Imposta le proprietà
direction, justify, align, wrap, gap.
-
Guarda l’anteprima
Elementi numerati reagiscono dal vivo.
-
Copia il CSS
Applicalo al tuo contenitore.
Il CSS del contenitore
| Proprietà | Ruolo |
|---|---|
| display: flex | Attiva Flexbox |
| flex-direction | Riga o colonna |
| justify-content | Distribuzione (asse principale) |
| align-items | Allineamento (asse trasversale) |
| gap | Spazio tra gli elementi |
Il CSS vale per il genitore; i figli si posizionano da soli. Tutto è generato nel browser.
Domande frequenti
A cosa serve Flexbox?
Flexbox è una modalità di layout CSS per allineare e distribuire elementi su una riga o colonna. Gestisce automaticamente spaziatura, centratura e a capo, semplificando molto i layout responsive.
Che differenza c’è tra justify-content e align-items?
justify-content distribuisce gli elementi lungo l’asse principale (orizzontale in row), align-items li allinea sull’asse trasversale (verticale in row). Passando a column, i due assi si invertono.
Il CSS generato vale per il contenitore o gli elementi?
Per il contenitore. Le proprietà (display: flex, justify-content, ecc.) vanno sul genitore; i figli si posizionano da soli. L’anteprima mostra elementi numerati.
Cosa fa flex-wrap?
Per impostazione predefinita (nowrap) gli elementi restano su una riga, restringendosi se serve. Con wrap passano alla riga successiva quando manca spazio — utile per griglie fluide.