Approfondimento su Flexbox: allineamento, wrapping e ordine
Padroneggi justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis e la proprietà order.
Approfondimento su Flexbox: allineamento, wrapping e ordine è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Ripasso: contenitore e elementi Flex
Riepilogo: display: flex sul contenitore trasforma i figli diretti in elementi flex. L'asse principale segue flex-direction. L'asse trasversale è perpendicolare.
Valori di justify-content nel dettaglio
Tutti i valori di justify-content su un contenitore con direzione per righe: flex-start (predefinito), flex-end, center, space-between (spazi solo tra gli elementi), space-around (margini uguali attorno a ciascun elemento), space-evenly (spazi uguali ovunque).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items e align-content
align-items allinea gli elementi all'interno di una singola riga. align-content allinea più righe (funziona solo quando flex-wrap è wrap e sono presenti più righe).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self sui singoli elementi
align-self sovrascrive align-items per uno specifico elemento flex. È utile per fare in modo che un elemento si estenda mentre gli altri rimangono centrati.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap e wrap-reverse
flex-wrap: wrap consente agli elementi di passare a nuove righe. wrap-reverse manda a capo gli elementi nella direzione opposta. Lo combini con gap per creare semplici griglie responsive.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink, flex-basis
La sintassi abbreviata flex in tre parti applicata agli elementi. flex-grow: la quota dello spazio disponibile. flex-shrink: la velocità di riduzione quando lo spazio è limitato. flex-basis: la dimensione iniziale prima dell'espansione o della riduzione.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Abbreviazioni comuni di flex
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (occupa il doppio dello spazio rispetto a flex: 1).
Proprietà order
order modifica l'ordine visivo degli elementi flex senza modificare l'HTML. Il valore predefinito è 0. I valori negativi vengono visualizzati prima di 0. La usi con cautela: le differenze tra l'ordine visivo e quello del DOM possono confondere gli utenti che navigano con la tastiera o usano lettori di schermo.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 per risolvere i problemi di overflow
Gli elementi flex hanno implicitamente min-width: auto, perciò non si restringono al di sotto della dimensione del contenuto. Imposti min-width: 0 per consentire loro di ridursi ulteriormente: è essenziale per troncare il testo all'interno degli elementi flex.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Spaziatura flex senza gap
Negli ambienti meno recenti che non supportano gap, usi il margine sugli elementi e un margine negativo sul contenitore per creare gli spazi. Oggi, però, gap è supportato da tutti i browser moderni: lo preferisca.
Contenitori flex annidati
Qualsiasi elemento flex può essere a sua volta un contenitore flex. Annidi Flexbox per creare layout complessi: una riga di schede i cui contenuti interni sono anch'essi disposti con Flexbox. È il modello normalmente usato nei layout moderni.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Verifica rapida
Quale proprietà distribuisce lo spazio tra gli elementi flex lungo l'asse trasversale quando flex-wrap è wrap?
Riepilogo: approfondimento su Flexbox
justify-content distribuisce lo spazio lungo l'asse principale. align-items gestisce l'asse trasversale su una singola riga. align-content gestisce l'asse trasversale su più righe. align-self agisce sul singolo elemento. flex-wrap: wrap abilita più righe. La sintassi abbreviata flex controlla espansione, riduzione e dimensione di base. order modifica l'ordine visivo. min-width: 0 previene i problemi di riduzione.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Approfondimento su Flexbox: allineamento, wrapping e ordine» è gratuita?
Sì — il testo completo di «Approfondimento su Flexbox: allineamento, wrapping e ordine» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Approfondimento su Flexbox: allineamento, wrapping e ordine»?
Padroneggi justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis e la proprietà order. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Approfondimento su Flexbox: allineamento, wrapping e ordine»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Approfondimento su Flexbox: allineamento, wrapping e ordine
- CSS Grid: template-areas, auto-fit e minmax
- Combinare Flexbox e Grid
- Variabili CSS per i temi