Frontend Academy · Lezione

Flexbox per il layout

Utilizzi Flexbox per allineare gli elementi in riga o colonna, distribuire lo spazio e mandare a capo il contenuto senza ricorrere a hack con float.

Flexbox per il layout è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Che cos'è Flexbox?

Flexbox (Flexible Box Layout) è un modello di layout CSS progettato per layout unidimensionali: distribuisce lo spazio lungo una singola riga o colonna. Risolve in modo elegante problemi che i layout basati sui float non riuscivano a gestire.

Attivare Flexbox

Applichi display: flex al contenitore. I suoi figli diretti diventano automaticamente elementi flex. I figli di questi elementi non vengono coinvolti.

.container {
  display: flex;
}
/* All direct children are now flex items */

flex-direction

Imposta l'asse principale. row (predefinito): dispone gli elementi da sinistra a destra. row-reverse: da destra a sinistra. column: dall'alto verso il basso. column-reverse: dal basso verso l'alto.

.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; }

justify-content — allineamento sull'asse principale

Distribuisce lo spazio lungo l'asse principale. flex-start (predefinito), flex-end, center, space-between, space-around, space-evenly.

.nav {
  display: flex;
  justify-content: space-between; /* logo left, links right */
}
.centered {
  display: flex;
  justify-content: center; /* items in the middle */
}

align-items — allineamento sull'asse trasversale

Allinea gli elementi lungo l'asse trasversale (perpendicolare all'asse principale). stretch (predefinito), center, flex-start, flex-end, baseline.

.card {
  display: flex;
  align-items: center; /* vertically center content */
}

Proprietà gap

gap: row-gap column-gap aggiunge spazio tra gli elementi flex senza usare margin. È molto più pulito del trucco basato su margin. È ampiamente supportato dai browser moderni.

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;        /* 24px in all directions between items */
  gap: 16px 24px;  /* row-gap column-gap */
}

flex-wrap

Per impostazione predefinita, gli elementi flex vengono compressi su una sola riga. flex-wrap: wrap consente loro di passare a nuove righe quando non entrano. Lo combini con gap per creare una semplice griglia responsive.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 280px; /* grow, shrink, min-width */
}

La sintassi abbreviata flex sugli elementi

flex: grow shrink basis sugli elementi flex. flex: 1 è la forma abbreviata di 1 1 0%: gli elementi crescono in modo uniforme e ignorano le proprie dimensioni in base al contenuto. flex: 0 0 200px crea un elemento fisso di 200px.

.sidebar { flex: 0 0 240px; }   /* fixed width */
.main    { flex: 1; }            /* takes remaining space */

align-self

align-self su un elemento flex sostituisce il valore align-items del contenitore per quell'unico elemento. È utile per allineare un elemento in modo diverso dai suoi elementi fratelli.

.container { display: flex; align-items: center; }
.tall-item  { align-self: flex-start; }

Proprietà order

order controlla l'ordine visivo degli elementi flex senza modificare l'ordine HTML. Il valore predefinito è 0. I valori più bassi vengono visualizzati per primi. Lo utilizzi con moderazione: crea una discrepanza tra l'ordine visivo e l'ordine del DOM e di lettura.

Centrare con Flexbox

Il modo più semplice per centrare un elemento sia orizzontalmente sia verticalmente è impostare il genitore su display: flex; justify-content: center; align-items: center.

.overlay {
  position: fixed;
  inset: 0;  /* shorthand for top/right/bottom/left: 0 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
}

Verifica rapida

Quale proprietà Flexbox distribuisce lo spazio tra gli elementi lungo l'asse principale?

Riepilogo: fondamenti di Flexbox

display: flex sul contenitore. flex-direction: row o column per definire l'asse. justify-content per la spaziatura sull'asse principale. align-items per l'asse trasversale. gap per le spaziature. flex-wrap per le righe multiple. La sintassi abbreviata flex sugli elementi per controllarne la crescita. Un sistema di layout unidimensionale versatile.

Domande Frequenti

La lezione «Flexbox per il layout» è gratuita?

Sì — il testo completo di «Flexbox per il layout» è 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 «Flexbox per il layout»?

Utilizzi Flexbox per allineare gli elementi in riga o colonna, distribuire lo spazio e mandare a capo il contenuto senza ricorrere a hack con float. 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 2 di 4.

Quanto tempo richiede la lezione «Flexbox per il layout»?

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

← Torna a Frontend Academy