CSS Academy · Lezione

Display flex e flex-direction

Attivate flexbox su un contenitore e controllate la direzione dell'asse principale con flex-direction.

Display flex e flex-direction è una lezione CSS 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Attivare Flexbox

Flexbox si attiva impostando display: flex su un elemento contenitore (il contenitore flex). I suoi figli diretti diventano automaticamente elementi flex.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Flex inline

display: inline-flex crea un contenitore flex che si dispone inline, come inline-block, anziché come un blocco. Il comportamento interno di Flexbox è identico.

<p>Status: <span class="badge">🔥 Trending</span></p>

L'asse principale e l'asse trasversale

Flexbox ha due assi:

Asse principale: la direzione primaria lungo cui vengono disposti gli elementi
Asse trasversale: perpendicolare all'asse principale

Tutte le proprietà flex fanno riferimento a questi assi, non a direzioni fisse.

flex-direction: row (predefinito)

La direzione predefinita è row: gli elementi vengono disposti da sinistra a destra lungo l'asse principale orizzontale.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column dispone gli elementi verticalmente. L'asse principale diventa verticale e quello trasversale orizzontale.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse inverte la direzione orizzontale: gli elementi vengono disposti da destra a sinistra. L'inizio dell'asse principale si trova a destra.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse dispone gli elementi dal basso verso l'alto. L'ultimo elemento appare in cima.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction influisce su tutte le proprietà flex

Quando modifica flex-direction, anche justify-content cambia direzione. Se la direzione è column, justify-content allinea lungo l'asse verticale, non quello orizzontale.

Layout orizzontale semplice

Il caso d'uso più semplice di Flexbox: centrare gli elementi in una barra di navigazione:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Layout verticale semplice

Centrare verticalmente e orizzontalmente il contenuto di una scheda:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Abbreviazione flex-flow

flex-flow è l'abbreviazione di flex-direction e flex-wrap:

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

Verifica rapida

Quando è impostato flex-direction: column, quale asse controlla justify-content?

Riepilogo

Imposti display: flex su un contenitore per creare un contesto flex per i suoi figli. flex-direction definisce la direzione dell'asse principale: row (orizzontale) o column (verticale). Tutte le proprietà di allineamento flex sono relative a questi assi, non a direzioni fisse come sinistra/destra o alto/basso.

Domande Frequenti

La lezione «Display flex e flex-direction» è gratuita?

Sì — il testo completo di «Display flex e flex-direction» è 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 «Display flex e flex-direction»?

Attivate flexbox su un contenitore e controllate la direzione dell'asse principale con flex-direction. 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 1 di 4.

Quanto tempo richiede la lezione «Display flex e flex-direction»?

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