Playground Flexbox
Sperimenta con CSS Flexbox in modo visuale.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Playground interattivo di CSS Flexbox
CSS Flexbox (Flexible Box Layout) è uno dei sistemi di layout più potenti e utilizzati nello sviluppo web moderno. Permette di distribuire lo spazio e allineare gli elementi all'interno di un contenitore in modo flessibile e prevedibile, anche quando la dimensione degli elementi è sconosciuta o dinamica. Flexbox semplifica enormemente compiti di design che prima richiedevano hack complicati con float o positioning.
Il nostro playground di Flexbox ti permette di sperimentare visualmente con tutte le proprietà del contenitore flex: flex-direction (direzione dell'asse principale), justify-content (allineamento sull'asse principale), align-items (allineamento sull'asse trasversale), flex-wrap (comportamento di overflow) e gap (spazio tra elementi). Puoi anche configurare proprietà individuali di ogni item: order, flex-grow, flex-shrink e align-self.
L'anteprima si aggiorna in tempo reale, permettendoti di vedere immediatamente come ogni proprietà influisce sulla distribuzione degli elementi. Puoi aggiungere e rimuovere item, cliccare su qualsiasi item per selezionarlo e modificare le sue proprietà individuali, e infine copiare il codice CSS generato per usarlo direttamente nel tuo progetto. È lo strumento perfetto per imparare Flexbox o per prototipare layout rapidamente.
Domande frequenti
Quando devo usare Flexbox vs Grid?
Flexbox è ideale per layout unidimensionali (una riga o una colonna), come barre di navigazione, liste di card orizzontali o allineamento di elementi in un contenitore. CSS Grid è migliore per layout bidimensionali (righe e colonne simultaneamente), come layout di pagina completi o gallerie complesse.
Cosa fa flex-grow?
flex-grow definisce quanto un item può crescere per riempire lo spazio disponibile nel contenitore. Un valore di 0 (predefinito) significa che l'item non cresce. Se un item ha flex-grow: 1 e un altro flex-grow: 2, il secondo crescerà il doppio del primo.
È compatibile con tutti i browser?
Sì, CSS Flexbox ha supporto completo in tutti i browser moderni da anni. Chrome, Firefox, Safari, Edge e Opera lo supportano senza necessità di prefissi. Solo Internet Explorer 10-11 aveva un'implementazione parziale e con errori.
Vuoi saperne di più? Leggi la nostra guida completa →