Allineamento degli elementi flex lungo l'asse trasversale in CSS

Ora allineiamo i blocchi anche lungo l'asse trasversale. L'allineamento lungo questo asse è impostato dalla proprietà align-items. Il valore flex-start spinge gli elementi all'inizio dell'asse, mentre il valore flex-end alla fine.

Proviamo con degli esempi.

Esempio

Impostiamo l'asse principale da sinistra a destra. In questo caso l'asse trasversale sarà orientato dall'alto verso il basso. Regoliamo la posizione dei nostri blocchi sia lungo l'asse principale che lungo quello trasversale.

Lungo l'asse principale spingiamo i blocchi verso il suo inizio, cioè verso il bordo sinistro. Per fare ciò impostiamo justify-content al valore flex-start. Lungo l'asse trasversale spingiamo anche i blocchi verso il suo inizio, cioè verso il bordo superiore. Per fare ciò impostiamo align-items anch'esso al valore flex-start.

Vediamo cosa otteniamo:

css.parent {
  display: flex;
  flex-direction:  row;        /* asse principale verso destra, trasversale verso il basso */
  justify-content: flex-start; /* blocchi all'inizio dell'asse principale */
  align-items:     flex-start; /* blocchi all'inizio dell'asse trasversale */
}

Risultato dell'esecuzione del codice:

Esempio

Ora spingiamo i blocchi verso la fine dell'asse trasversale, cioè verso il basso. Per fare ciò impostiamo align-items al valore flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* asse principale verso destra, trasversale verso il basso */
  justify-content: flex-start; /* blocchi all'inizio dell'asse principale */
  align-items:     flex-end;   /* blocchi alla fine dell'asse trasversale */
}

Risultato dell'esecuzione del codice:

Esempio

Ora impostiamo l'asse principale dall'alto verso il basso. Poiché l'asse principale è verticale, quello trasversale sarà orientato da destra a sinistra. Spingiamo i blocchi lungo entrambi gli assi verso il loro inizio:

css.parent {
  display: flex;
  flex-direction:  column;     /* asse principale verso il basso, trasversale verso destra */
  justify-content: flex-start; /* blocchi all'inizio dell'asse principale */
  align-items:     flex-start; /* blocchi all'inizio dell'asse trasversale */
}

Risultato dell'esecuzione del codice:

Esempio

E lungo l'asse trasversale spingiamo i blocchi verso la sua fine:

css.parent {
  display: flex;
  flex-direction:  column;     /* asse principale verso il basso, trasversale verso destra */
  justify-content: flex-start; /* blocchi all'inizio dell'asse principale */
  align-items:     flex-end;   /* blocchi alla fine dell'asse trasversale */
}

Risultato dell'esecuzione del codice:

Esempio

Spingiamo i blocchi verso la fine di entrambi gli assi:

css.parent {
  display: flex;
  flex-direction:  column;   /* asse principale verso il basso, trasversale verso destra */
  justify-content: flex-end; /* blocchi alla fine dell'asse principale */
  align-items:     flex-end; /* blocchi alla fine dell'asse trasversale */
}

Risultato dell'esecuzione del codice:

Esempio

Cambiamo la direzione dell'asse principale - impostiamolo dal basso verso l'alto. In questo caso l'asse trasversale non cambierà la sua direzione, poiché l'asse principale è ancora verticale.

Spingiamo i blocchi verso l'inizio di entrambi gli assi:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* asse principale verso l'alto, trasversale verso destra */
  justify-content: flex-start;     /* blocchi all'inizio dell'asse principale */
  align-items:     flex-start;     /* blocchi all'inizio dell'asse trasversale */
}

Risultato dell'esecuzione del codice: