align-items e align-self: controllo sull'asse trasversale

Se justify-content muove gli oggetti lungo l’Asse Principale, la proprietà align-items li muove lungo il Cross Axis (Asse Trasversale), ovvero quello perpendicolare.

In un classico layout flex-direction: row, align-items allinea gli elementi verticalmente (alto-basso).

I valori di align-items (da applicare al Genitore)

Immagina un contenitore alto 300px con tre pulsanti all’interno. Come si comportano verticalmente?

1. stretch (Il Default)

Questa è una sorpresa per molti: di default, gli elementi figli in Flexbox si “stirano” per occupare tutta l’altezza disponibile sull’asse trasversale. Questo risolve il problema storico delle “colonne di uguale altezza” che affliggeva i web designer del passato!

.container {
  display: flex;
  height: 300px;
  align-items: stretch; /* Le card saranno tutte alte 300px, indipendentemente dal contenuto! */
}

2. center

Centra gli elementi sull’asse trasversale. In row: li allinea verticalmente in mezzo al contenitore.

/* Centratura orizzontale e verticale */
.perfettamente-centrato {
  display: flex;
  justify-content: center; /* Centra Orizzontalmente */
  align-items: center;     /* Centra Verticalmente */
  height: 100vh;
}

3. flex-start

Ignora lo stretch e allinea tutto all’inizio dell’asse trasversale (in alto). Gli elementi mantengono l’altezza minima richiesta dal loro contenuto.

4. flex-end

Allinea tutto alla fine dell’asse trasversale (in basso).

5. baseline

Un valore raffinato: allinea gli elementi in base alla “linea di base” del loro testo. Utile se hai un’icona grande vicino a un testo piccolo e vuoi che le parole siano allineate alla base delle lettere, indipendentemente dalle dimensioni della scatola esterna dell’icona.

align-self: eccezioni sui singoli figli

Mentre align-items imposta l’allineamento per tutti i figli, align-self si applica direttamente a un singolo figlio (flex item).

Serve per sovrascrivere la regola generale e fare un’eccezione per un singolo elemento. Accetta esattamente gli stessi valori di align-items.

<div class="menu">
  <div class="voce">Home</div>
  <div class="voce">Servizi</div>
  <div class="voce logo">LOGO GIGANTE</div>
</div>

.menu {
  display: flex;
  align-items: center; /* Tutti sono centrati verticalmente */
  height: 100px;
}

.logo {
  /* Il logo usa un allineamento diverso dagli altri elementi */
  align-self: flex-start; 
}

Questa accoppiata align-items / align-self ti permette di controllare l’allineamento senza ricorrere a calcoli di margini fragili.