Area di prova CSS Flexbox
Area di prova interattiva per imparare e generare layout Flexbox
Impostazioni del layout
Layout preimpostati
Personalizzazioni per elemento
Selezioni un elemento nell'anteprima o nell'elenco per modificarne le proprietà.
Guida rapida a Flexbox
Asse principale
justify-content controlla l'allineamento lungo l'asse principale (determinato da flex-direction).
Asse trasversale
align-items controlla l'allineamento lungo l'asse trasversale (perpendicolare a flex-direction).
Più righe
align-content si applica solo quando flex-wrap è impostato su wrap o wrap-reverse con più righe.
Anteprima in tempo reale
CSS generato
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Modifichi le impostazioni o selezioni un elemento. L'anteprima e il CSS si aggiornano insieme.
Informazioni su Area di prova CSS Flexbox
L'Area di prova CSS Flexbox è uno strumento visuale e interattivo per imparare e sperimentare con i layout CSS Flexbox. Flexbox (Flexible Box Layout) è uno dei moduli di layout CSS più potenti e diffusi, progettato per disporre gli elementi all'interno di un contenitore con un comportamento flessibile e adattabile. Questo strumento Le permette di modificare in tempo reale ogni proprietà del contenitore flex e degli elementi flex e di vedere esattamente come cambia il layout.
Funzioni principali
- Controllo completo di tutte le proprietà del contenitore flex: flex-direction, flex-wrap, justify-content, align-items, align-content e gap
- Sovrascritture per singolo elemento: order, flex-grow, flex-shrink, flex-basis e align-self
- Anteprima visiva dal vivo con elementi colorati e numerati e un bordo tratteggiato del contenitore
- Layout predefiniti, tra cui Barra di navigazione, Griglia di card, Holy Grail, Contenuto centrato e Layout con barra laterale
- Codice CSS generato automaticamente con copia con un clic
- Controllo dinamico del numero di elementi da 1 a 12
- Selezione degli elementi con un clic per modificare le proprietà del singolo elemento
- Supporto della modalità scura per usarlo comodamente in qualsiasi condizione di luce
Capire le proprietà di Flexbox
Flexbox lavora su due assi: l'asse principale (definito da flex-direction) e l'asse trasversale (perpendicolare all'asse principale). La proprietà justify-content distribuisce lo spazio lungo l'asse principale, mentre align-items gestisce l'allineamento sull'asse trasversale. Quando flex-wrap consente di andare a capo su più righe, align-content controlla la spaziatura tra quelle righe. Ogni elemento flex può sovrascrivere il proprio allineamento con align-self, controllare i rapporti di crescita e restringimento e impostare una dimensione di base con flex-basis.
Schemi di layout Flexbox comuni
Flexbox eccelle nella creazione di barre di navigazione, nel centrare i contenuti in orizzontale e in verticale, nel realizzare griglie di card che vanno a capo in modo adattabile, nel costruire layout con barra laterale fissa e contenuto principale fluido e nell'implementare il classico layout Holy Grail con aree per intestazione, piè di pagina, barra laterale e contenuto principale. Usi i pulsanti dei preset per vedere subito questi schemi in azione.
A chi è destinato questo strumento?
- Sviluppatori web che imparano CSS Flexbox per la prima volta
- Ingegneri frontend che realizzano rapidamente prototipi di layout adattabili
- Designer UI/UX che vogliono visualizzare i layout flex prima di scrivere il codice
- Studenti che studiano le tecniche di layout CSS per i corsi o per i colloqui
- Docenti che illustrano i concetti di Flexbox in workshop o in aula
- Chiunque abbia bisogno di generare rapidamente CSS Flexbox per i propri progetti