CSS Academy · Lezione

Justify-content e align-items

Distribuite gli elementi lungo l'asse principale e quello trasversale utilizzando justify-content e align-items.

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

Due proprietà fondamentali per l'allineamento

Le due proprietà flex più utilizzate per l'allineamento sono:

justify-content — allinea gli elementi lungo l'asse principale
align-items — allinea gli elementi lungo l'asse trasversale

justify-content: flex-start

flex-start (predefinito) raggruppa gli elementi verso l'inizio dell'asse principale. Nella direzione row, gli elementi vengono allineati a sinistra.

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

justify-content: center

Centra gli elementi lungo l'asse principale. È la tecnica classica per il centraggio orizzontale con Flexbox.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Raggruppa gli elementi verso la fine dell'asse principale, ovvero sul lato destro nella direzione row.

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Distribuisce gli elementi lasciando uno spazio uguale tra di essi. Il primo elemento si trova all'inizio e l'ultimo alla fine: non rimane spazio ai bordi.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Dispone uno spazio uguale intorno a ogni elemento. Gli elementi ai bordi ricevono metà dello spazio presente tra gli elementi interni. Visivamente, ai bordi c'è metà dello spazio rispetto a quello tra gli elementi.

justify-content: space-evenly

Tutti gli spazi, inclusi quelli ai bordi, sono uguali. A differenza di space-around, lo spazio ai bordi è uguale a quello tra gli elementi.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (predefinito)

stretch (predefinito) fa sì che tutti gli elementi flex riempiano la dimensione trasversale del contenitore. In un contenitore disposto in riga, tutti gli elementi assumono la stessa altezza.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Centra gli elementi sull'asse trasversale. In un contenitore disposto in riga, li centra verticalmente. È la soluzione classica per il centraggio verticale.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start e flex-end

flex-start allinea gli elementi al bordo iniziale dell'asse trasversale, ovvero in alto in una riga. flex-end li allinea al bordo finale, ovvero in basso in una riga.

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Allinea gli elementi in modo che le linee di base del testo coincidano. È utile quando gli elementi hanno dimensioni del carattere diverse, ma devono apparire visivamente allineati.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Verifica rapida

Quale combinazione centra perfettamente un elemento flex sia orizzontalmente sia verticalmente all'interno del contenitore?

Riepilogo

justify-content distribuisce gli elementi lungo l'asse principale con valori come flex-start, center e space-between. align-items posiziona gli elementi sull'asse trasversale con valori come stretch, center e flex-start. Insieme, queste proprietà controllano l'allineamento su entrambi gli assi.

Domande Frequenti

La lezione «Justify-content e align-items» è gratuita?

Sì — il testo completo di «Justify-content e align-items» è 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 «Justify-content e align-items»?

Distribuite gli elementi lungo l'asse principale e quello trasversale utilizzando justify-content e align-items. 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 2 di 4.

Quanto tempo richiede la lezione «Justify-content e align-items»?

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