Playground Flexbox
Sperimenta con le proprietà CSS Flexbox su elementi dal vivo e copia il CSS di layout generato.
—
Tutto viene eseguito nel tuo browser — niente viene caricato.
Informazioni su Playground Flexbox
Il Flexbox Playground è un sandbox pratico per il CSS flexbox. Imposta le proprietà del contenitore — flex-direction, flex-wrap, justify-content, align-items, align-content e gap — e osserva fino a 12 elementi live riorganizzarsi nell'anteprima a ogni valore modificato. È il modo più rapido per capire davvero cosa fa ciascuna proprietà.
Gli elementi sono modificabili singolarmente: clicca su uno per selezionarlo e regola il suo flex-grow, flex-shrink, flex-basis, align-self e order. Vedere un elemento crescere per occupare lo spazio libero mentre i suoi vicini mantengono la loro larghezza insegna il modello di dimensionamento flex più velocemente di qualsiasi diagramma.
Il playground genera CSS pulito per il contenitore e per ogni elemento con impostazioni non predefinite — copialo direttamente nel tuo foglio di stile. Tutto viene eseguito nel tuo browser senza alcun upload, e un pulsante di reset ti riporta a una configurazione pulita.
Come usare Playground Flexbox
- Imposta flex-direction, wrap, justify-content, align-items, align-content e gap del contenitore.
- Aggiungi o rimuovi elementi — tra 2 e 12 — per riprodurre il tuo componente reale.
- Clicca su un elemento e regola il suo grow, shrink, basis, align-self e order.
- Osserva l'anteprima live aggiornarsi a ogni modifica.
- Copia il CSS generato e incollalo nel tuo progetto.