CSS Academy · Lezione

Override dell'allineamento dei flex item con align-self

Sovrascriva align-items del contenitore per singoli flex item utilizzando align-self.

Override dell'allineamento dei flex item con align-self è 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.

Che cos'è align-self?

align-self sovrascrive l'impostazione align-items del contenitore flex per uno specifico elemento flex. Si applica ai singoli elementi, non al contenitore.

Valori di align-self

Accetta gli stessi valori di align-items:

auto — eredita align-items del contenitore, valore predefinito
flex-start — allinea all'inizio dell'asse trasversale
flex-end — allinea alla fine dell'asse trasversale
center — centra sull'asse trasversale
stretch — si estende fino a riempire la dimensione trasversale
baseline — allinea le linee di base del testo

Esempio pratico

Una barra di navigazione in cui la maggior parte degli elementi è centrata, mentre l'ultimo pulsante è allineato alla fine:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Estendere un singolo elemento

Faccia sì che una scheda si estenda per tutta l'altezza, mentre le altre si adattino al proprio contenuto:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto come strumento di allineamento

I margini automatici sugli elementi flex spingono se stessi, o gli elementi fratelli, verso il lato opposto. Sono una potente alternativa ad align-self per centrare o distribuire lo spazio.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto per la centratura verticale

I margini automatici funzionano anche verticalmente. margin-top: auto all'interno di un contenitore flex disposto in colonna spinge un elemento verso il fondo:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Allineamento alla linea di base

L'allineamento degli elementi in base alla linea di base del testo mantiene relazioni leggibili tra elementi di dimensioni diverse:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (predefinito)

align-self: auto indica all'elemento di usare il valore di align-items del contenitore. Deve impostare align-self solo quando desidera discostarsi dal valore predefinito del contenitore.

Asse trasversale e asse principale

Ricordi: align-self opera sempre sull'asse trasversale. Se flex-direction: column, l'asse trasversale è orizzontale, quindi align-self controlla il posizionamento a sinistra e a destra.

Combinare align-self con flex-grow

Un modello comune: espandere un elemento per riempire lo spazio e sovrascrivere anche il suo allineamento trasversale:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Allineamento tra Grid e Flexbox

CSS Grid dispone sia di align-self per l'asse delle righe sia di justify-self per l'asse delle colonne, consentendo un controllo 2D. align-self di Flexbox controlla solo l'asse trasversale: utilizzi margin: auto per l'asse principale.

Verifica rapida

Un contenitore flex ha align-items: center. Un elemento deve essere allineato nella parte superiore dell'asse trasversale. Quale proprietà deve impostare su quell'elemento?

Riepilogo

align-self sovrascrive align-items del contenitore flex per i singoli elementi. Lo utilizzi per modificare il modello di allineamento di elementi specifici. margin: auto è uno strumento complementare che distribuisce lo spazio rimanente per spingere gli elementi lungo uno dei due assi.

Domande Frequenti

La lezione «Override dell'allineamento dei flex item con align-self» è gratuita?

Sì — il testo completo di «Override dell'allineamento dei flex item con align-self» è 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 «Override dell'allineamento dei flex item con align-self»?

Sovrascriva align-items del contenitore per singoli flex item utilizzando align-self. 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 «Override dell'allineamento dei flex item con align-self»?

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

Override dell'allineamento dei flex item con align-self
Proprietà order e riordinamento visivo
Pattern della sintassi abbreviata flex
Layout Flexbox comuni: nav, card e media object

← Torna a CSS Academy