CSS Academy · Lezione

Flex-wrap e align-content

Consentite agli elementi flex di andare a capo su più righe e allineate le righe con align-content.

Flex-wrap e align-content è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

flex-wrap: nowrap (predefinito)

Per impostazione predefinita, gli elementi flex non vanno a capo. Se superano la larghezza del contenitore, si restringono o generano overflow invece di andare su una nuova riga.

flex-wrap: wrap

Con flex-wrap: wrap, gli elementi che superano l'asse principale vanno su una nuova riga o colonna, nella direzione column. Ogni riga risultante dal ritorno a capo si comporta come un piccolo contenitore flex separato.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse dispone gli elementi nella direzione trasversale opposta: nella direzione row, le nuove righe appaiono sopra anziché sotto.

Schema per schede con ritorno a capo

Un classico layout responsive di schede, in cui le schede passano alla riga successiva quando la viewport si restringe:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content per più righe

align-content controlla la spaziatura tra le righe risultanti dal ritorno a capo sull'asse trasversale. Non ha effetto quando è presente una sola riga. I valori corrispondono a quelli di justify-content.

Valori di align-content

Valori disponibili:

flex-start — raggruppa le righe verso l'inizio dell'asse trasversale
flex-end — le raggruppa verso la fine dell'asse trasversale
center — centra le righe
space-between — lascia uno spazio uguale tra le righe
space-around — lascia uno spazio uguale intorno alle righe
stretch — estende le righe per riempire lo spazio (predefinito)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items e align-content

Differenza:

align-items — allinea gli elementi all'interno di ogni riga flex
align-content — allinea le righe flex stesse all'interno del contenitore

Gap in Flexbox

La proprietà gap, precedentemente grid-gap, aggiunge uno spazio uniforme tra gli elementi flex senza utilizzare i margini. Funziona sia per gli spazi tra le righe sia per quelli tra le colonne.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Ritorno a capo responsive senza media query

Disponga automaticamente gli elementi in tante colonne quante ne entrano, utilizzando una dimensione ideale fissa. Non sono necessarie media query:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Abbreviazione flex-flow

flex-flow combina flex-direction e flex-wrap in un'unica dichiarazione:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Ritorno a capo e Grid

Per layout bidimensionali complessi con righe e colonne definite, CSS Grid è più appropriato. Il ritorno a capo di Flexbox è ideale per contenuti monodimensionali che si dispongono su più righe.

Verifica rapida

Quale proprietà allinea le righe risultanti dal ritorno a capo quando un contenitore flex ha più righe?

Riepilogo

flex-wrap: wrap consente agli elementi di passare a nuove righe. align-content controlla la spaziatura tra queste righe in un contenitore con più righe. Utilizzi gap per ottenere una spaziatura uniforme. Combini flex: 1 1 250px con flex-wrap per creare griglie responsive di schede senza media query.

Domande Frequenti

La lezione «Flex-wrap e align-content» è gratuita?

Sì — il testo completo di «Flex-wrap e align-content» è 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Flex-wrap e align-content»?

Consentite agli elementi flex di andare a capo su più righe e allineate le righe con align-content. Eserciti CSS 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 CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS 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 3 di 4.

Quanto tempo richiede la lezione «Flex-wrap e align-content»?

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 CSS Academy?

Sì. Ogni lezione CSS 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

← Torna a CSS Academy