Sperimenta con le proprietà flexbox su un'anteprima dal vivo e copia il CSS generato.
Informazioni su questo strumento
The CSS Flexbox Playground è un editor interattivo per le principali proprietà di layout di un contenitore flex. Scegli i valori per flex-direction, justify-content, align-items e flex-wrap da quattro menu a discesa, e un'anteprima di cinque riquadri numerati si riorganizza all'istante, così puoi vedere come ogni proprietà modella il layout prima di scrivere qualsiasi codice.
Sotto l'anteprima, la regola .container corrispondente viene generata mentre lavori: display: flex seguito dalle quattro dichiarazioni che hai scelto. Un pulsante copia l'intero blocco nei tuoi appunti, pronto da incollare in un foglio di stile. Vengono esposte solo queste proprietà a livello di contenitore; le impostazioni per singolo elemento come flex-grow, order o align-self non sono trattate.
Tutto avviene nel tuo browser. Nulla viene caricato, non ci sono account né tracciamento, e funziona offline. È un modo rapido per costruire intuizione su flexbox o per produrre una regola di partenza che poi affini a mano.
Domande frequenti
Cosa mostra l'anteprima?
Un contenitore flex che ospita cinque riquadri numerati che si riorganizzano in tempo reale mentre cambi flex-direction, justify-content, align-items o flex-wrap.
Il CSS generato è pronto all'uso?
Sì. Copia la regola .container generata direttamente nel tuo foglio di stile; contiene display: flex più le quattro proprietà che hai selezionato.
Quali proprietà flexbox posso regolare?
Quattro menu a discesa controllano flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) e flex-wrap (nowrap, wrap, wrap-reverse).
L'output include il gap o le impostazioni flex per singolo elemento?
No. La regola copiata contiene solo display: flex e le quattro proprietà del contenitore. Il gap di 8px nell'anteprima serve solo per la spaziatura, e le proprietà a livello di elemento come flex-grow, order o align-self non sono incluse.