Guida rapida a CSS Flexbox
Consulta le proprietà CSS Flexbox per contenitori ed elementi, i valori predefiniti e frammenti di codice pronti per layout comuni.
Esegui lo strumento
Questa guida di riferimento raccoglie le regole CSS Flexbox per strutturare layout moderni su contenitori ed elementi figli. La consultazione include i parametri del contenitore, come la direzione dell'asse principale con row o column, la gestione del ritorno a capo con flex-wrap e la spaziatura tramite gap con valori in pixel o rem. La scheda illustra pure le direttive per allineare gli elementi lungo l'asse principale tramite justify-content e sull'asse trasversale tramite align-items e align-content. Per i singoli elementi flessibili, la guida elenca le proprietà flex-grow, flex-shrink, flex-basis, la forma sintetica flex, l'allineamento individuale con align-self e l'ordinamento con order. La risorsa include i valori predefiniti del modello flessibile e frammenti di codice CSS pronti all'uso per centrare contenuti, creare barre di navigazione, comporre griglie di schede adattabili, affiancare barre laterali, impostare colonne uniformi e definire piè di pagina fissati in basso.
Istruzioni
- Apri la guida rapida a CSS Flexbox.
- Consulta le proprietà del contenitore flessibile per impostare direzione, a capo e allineamento.
- Esamina le regole per gli elementi flessibili per gestire crescita, contrazione e ordine.
- Copia il modello di codice CSS corrispondente alla struttura desiderata per la tua interfaccia.
Esempi
- Centratura perfetta: imposta display: flex sul contenitore, aggiungi justify-content: center per l'asse orizzontale e align-items: center per l'asse verticale.
- Barra di navigazione reattiva: applica display: flex con justify-content: space-between e align-items: center per distribuire logo e collegamenti sui lati opposti.
FAQ
Quali sono i valori predefiniti principali di CSS Flexbox?
Un contenitore flessibile adotta come valori predefiniti la direzione a riga (row), nessun a capo (nowrap), allineamento iniziale sull'asse principale e allungamento (stretch) sull'asse trasversale. Gli elementi figli partono con crescita zero, fattore di contrazione pari a uno e ordine zero.
Questo strumento offre un'anteprima grafica interattiva del rendering?
No. Lo strumento fornisce una scheda di riferimento documentale e frammenti di codice CSS pronti per l'integrazione nel tuo editor, senza rendering grafico o calcolo dinamico del browser.
Come si gestisce lo spazio tra gli elementi con Flexbox?
Puoi impostare la proprietà gap sul contenitore specificando un'unità di misura CSS valida, come 16px o 1rem, per separare righe e colonne senza ricorrere a margini manuali sui singoli elementi.