Allineamento degli elementi flex lungo l'asse principale in CSS
La proprietà justify-content permette
di allineare gli elementi lungo l'asse principale. In precedenza
hai già incontrato i valori center,
space-between, space-around,
space-evenly. Ora esaminiamo
alcuni valori aggiuntivi.
Il valore flex-start spinge gli elementi verso l'inizio
dell'asse principale, mentre il valore flex-end - verso la fine.
Vediamo alcuni esempi.
Esempio
Dirigiamo l'asse principale da sinistra a destra, impostando
la proprietà flex-direction al valore row.
Spingiamo i blocchi verso l'inizio dell'asse. Per fare ciò justify-content
va impostato al valore flex-start:
.parent {
display: flex;
flex-direction: row; /* asse principale da sinistra a destra */
justify-content: flex-start; /* blocchi verso l'inizio dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Ora spingiamo i blocchi verso la fine dell'asse.
Per fare ciò justify-content va impostato
al valore flex-end:
.parent {
display: flex;
flex-direction: row; /* asse principale da sinistra a destra */
justify-content: flex-end; /* blocchi verso la fine dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Ora dirigiamo l'asse principale da destra a sinistra,
impostando la proprietà flex-direction al valore
row-reverse. Spingiamo i blocchi verso l'inizio
dell'asse, cioè verso il bordo destro. Per fare ciò justify-content
va impostato al valore flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* asse principale da destra a sinistra */
justify-content: flex-start; /* blocchi verso l'inizio dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Ora spingiamo i blocchi verso la fine dell'asse principale,
cioè verso il bordo sinistro. Per fare ciò justify-content
va impostato al valore flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* asse principale da destra a sinistra */
justify-content: flex-end; /* blocchi verso la fine dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Negli esempi precedenti l'asse principale era orientato orizzontalmente. Ora capovolgiamolo e orientiamolo verticalmente.
Dirigiamo l'asse principale verso il basso, impostando
la proprietà flex-direction al valore
column.
Spingiamo i blocchi verso l'inizio dell'asse principale, cioè
verso il bordo superiore. Per fare ciò justify-content
va impostato al valore flex-start:
.parent {
display: flex;
flex-direction: column; /* asse principale dall'alto verso il basso */
justify-content: flex-start; /* blocchi verso l'inizio dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Ora spingiamo i blocchi verso la fine dell'asse principale,
cioè verso il bordo inferiore. Per fare ciò justify-content
va impostato al valore flex-end:
.parent {
display: flex;
flex-direction: column; /* asse principale dall'alto verso il basso */
justify-content: flex-end; /* blocchi verso la fine dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Capovolgiamo l'asse principale, dirigendolo dal basso
verso l'alto. Per fare ciò impostiamo la proprietà flex-direction
al valore column-reverse. In
questo caso i blocchi cambieranno il loro ordine -
all'inizio dell'asse si troverà l'ultimo blocco nel codice HTML.
Spingiamo i blocchi verso l'inizio dell'asse principale,
cioè verso il bordo inferiore. Per fare ciò justify-content
va impostato al valore flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* asse principale dal basso verso l'alto */
justify-content: flex-start; /* blocchi verso l'inizio dell'asse principale */
}
Risultato dell'esecuzione del codice:
Esempio
Spingiamo i blocchi verso la fine dell'asse principale,
cioè verso il bordo superiore. Per fare ciò justify-content
va impostato al valore flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* asse principale dal basso verso l'alto */
justify-content: flex-end; /* blocchi verso la fine dell'asse principale */
}
Risultato dell'esecuzione del codice:
