Categoria: Sviluppo
Generatore CSS Flexbox
Crea un contenitore flex in modo visuale e copia il CSS
Imposta flex-direction, flex-wrap, justify-content, align-items e la spaziatura su un'anteprima dal vivo costruita con veri elementi flex, poi copia la dichiarazione finale del contenitore. Niente lascia il tuo browser.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Flexbox ha cinque proprietà che interagiscono tra loro, la direzione cambia persino cosa si intende per "asse principale" ai fini di wrap e justify-content, ed è per questo che è più veloce vedere un cambiamento che immaginarlo. Questo strumento mantiene un vero contenitore flex a schermo con elementi numerati al suo interno, così ogni opzione viene valutata in base a come i box si muovono realmente e non a un modello mentale della specifica.
Come si usa
- Imposta flex-direction e flex-wrap.
- Scegli justify-content e align-items, e regola la spaziatura e il numero di elementi.
- Copia la regola .container finale nel tuo foglio di stile.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- L'anteprima è un vero layout flex?
- Sì. I box numerati sono disposti con il CSS esatto che stai impostando, non un'immagine, quindi quello che vedi è ciò che produce la regola copiata.
- Perché cambiare flex-direction cambia il comportamento di justify-content?
- justify-content lavora sempre lungo l'asse principale, ed è flex-direction a decidere se l'asse principale è orizzontale o verticale. Passare a column trasforma la "giustificazione" da sinistra/destra a alto/basso.
- Viene caricato qualcosa del mio layout?
- No. Il CSS è testo assemblato nella pagina a partire dai controlli che imposti, e l'anteprima viene renderizzata localmente.