Proprietà CSS align-self

La proprietà CSS align-self allinea un singolo elemento flex o grid lungo l'asse trasversale del suo contenitore, sovrascrivendo il valore align-items impostato sul contenitore.

Mentre align-items allinea tutti gli elementi nel contenitore contemporaneamente, align-self consente di selezionare un singolo elemento e allinearlo in modo diverso. Questa è la proprietà da usare quando un elemento deve discostarsi dagli altri — ad esempio, per fissare un logo in cima a una riga di intestazione mentre gli altri elementi rimangono verticalmente centrati.

align-self ha effetto solo quando l'elemento si trova all'interno di un contenitore flex, un contenitore grid, oppure è posizionato in modo assoluto. Su un elemento block-level ordinario non ha alcun effetto, ecco perché un valore come stretch non funziona finché non si imposta anche display: flex (o grid) sul genitore. È una delle proprietà CSS3.

Come si relaziona con align-items

La relazione è "contenitore vs. elemento":

align-items è impostata sul contenitore e allinea tutti gli elementi lungo l'asse trasversale.
align-self è impostata su un singolo elemento e sovrascrive ciò che dice align-items del contenitore per quell'elemento specifico.

Poiché align-self accetta gli stessi valori di align-items, è sufficiente imparare l'insieme di valori una sola volta. Il valore predefinito auto significa semplicemente "usa il valore align-items del contenitore", quindi un elemento senza align-self segue il comportamento generale.

Informazione

align-self viene ignorata quando l'elemento flex ha un margine verticale auto (il margine auto ha la precedenza e assorbe lo spazio libero). Non ha inoltre alcun effetto sulle celle delle tabelle o sulle box block-level autonome che non sono elementi flex/grid.

Valore iniziale	auto
Si applica a	Elementi flex, elementi grid e box posizionati in modo assoluto.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.alignSelf = "auto";

Sintassi

Sintassi della proprietà CSS align-self

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

Esempio della proprietà align-self:

Esempio della proprietà CSS align-self con valore flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(1) {
        align-self: flex-start;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Provalo tu stesso »

Risultato

Il valore align-items: center del contenitore mantiene i box #2 e #3 verticalmente centrati, mentre il box #1 — con align-self: flex-start — si sposta in cima, sovrascrivendo il valore del contenitore solo per sé stesso.

Ecco un esempio con tre box in cui il secondo è impostato con il valore "flex-end".

Esempio della proprietà align-self con il valore "flex-end":

Esempio della proprietà CSS align-self con valore flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: flex-end;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Provalo tu stesso »

Esempio con il valore "stretch":

Per impostazione predefinita un elemento flex occupa solo l'altezza necessaria per il suo contenuto. Impostare align-self: stretch su un elemento fa sì che quell'elemento si espanda per riempire l'intera dimensione trasversale del contenitore, mentre gli altri mantengono la loro altezza naturale. Per vedere stretch in azione è necessario lasciare l'height dell'elemento non impostata (o auto).

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: stretch;
        height: auto;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "stretch".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

align-self in CSS Grid

align-self non è esclusiva di Flexbox — funziona allo stesso modo all'interno di un contenitore grid, allineando un elemento grid lungo l'asse di blocco (colonna) della sua area grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* default for every item */
}
.grid .featured {
  align-self: start; /* this one item hugs the top of its cell */
}

In CSS Grid si usano le parole chiave start e end invece di flex-start e flex-end, ma il concetto è identico: il contenitore imposta un valore predefinito con align-items, e align-self lo sovrascrive per ogni singolo elemento.

Quando usare align-self

Un elemento che fa eccezione. La maggior parte degli elementi deve allinearsi in un certo modo, ma un singolo elemento (un'icona, un badge, un invito all'azione) richiede una posizione diversa.
Fissaggio in cima o in basso in una riga centrata. Una barra di navigazione che centra verticalmente i suoi link ma fissa un logo in cima.
Far espandere una singola card. In una riga di card della stessa altezza, forzare solo una a riempire l'altezza con align-self: stretch.

Se ogni elemento richiede lo stesso allineamento, imposta align-items sul contenitore — è più pulito che ripetere align-self su ogni figlio.

Valori

Valore	Descrizione	Prova
auto	L'elemento eredita la proprietà align-items del contenitore padre. Questo è il valore predefinito.	Prova »
stretch	Fa espandere gli elementi per adattarsi al contenitore.	Prova »
center	Gli elementi sono posizionati al centro del contenitore.	Prova »
flex-start	Gli elementi sono posizionati all'inizio del contenitore.	Prova »
flex-end	Gli elementi sono posizionati alla fine del contenitore.	Prova »
baseline	Gli elementi sono posizionati sulla linea di base del contenitore.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento padre.

Esercizio

Pratica

Cosa fa la proprietà 'align-self' in CSS?

Consente di sovrascrivere l'allineamento predefinito, o quello specificato da align-items, per singoli elementi flex.Viene utilizzata per cambiare il colore di sfondo di un elemento.Crea un nuovo livello sulla pagina web.Allinea gli elementi flex lungo la linea verticale all'interno dei loro contenitori.

Proprietà correlate

align-items — la versione a livello di contenitore di questa proprietà.
align-content — allinea le righe di un contenitore flex multi-linea.
justify-content — allinea gli elementi lungo l'asse principale.
flex-direction — imposta quale asse è l'asse principale (e quindi quale controlla align-self).
La Guida Definitiva a Flexbox — come si combinano tutte le proprietà di allineamento flex.