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:
.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:
.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:
.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:
.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:
.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:
.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:
