Asse principale e asse trasversale nei blocchi flex in CSS
Possiamo parlare di flexbox in due termini: il primo è - riga o colonna, il secondo - in termini di assi. Con righe e colonne abbiamo già fatto chiarezza, ora chiariamo gli assi. La comprensione degli assi è necessaria per allineare gli elementi orizzontalmente o verticalmente.
Quando si lavora con gli elementi flex esiste sempre
un asse principale e uno trasversale. Possiamo allineare gli elementi
sull'asse principale e attraverso
l'asse principale. L'asse principale può avere 4
direzioni: da sinistra a destra, da destra a sinistra,
dall'alto verso il basso e dal basso verso l'alto.
La direzione dell'asse trasversale dipende dalla direzione di quello principale: se l'asse principale è orizzontale, allora l'asse trasversale è diretto dall'alto verso il basso, se l'asse principale è verticale, allora quello trasversale è diretto da sinistra a destra. L'asse trasversale non può avere altre direzioni.
La direzione dell'asse principale è regolata dalla proprietà
flex-direction. Se questa proprietà
ha valore row - l'asse principale è diretto
da sinistra a destra, se invece ha valore row-reverse,
allora da destra a sinistra. Il valore column
direziona l'asse dall'alto verso il basso, mentre il valore column-reverse
- dal basso verso l'alto.
Supponiamo che l'asse principale sia orizzontale. Dove sarà diretto l'asse trasversale?
Supponiamo che l'asse principale sia verticale. Dove sarà diretto l'asse trasversale?
Supponiamo che l'asse trasversale sia diretto verso destra. Dove in tal caso potrebbe essere diretto l'asse principale?
Supponiamo che l'asse trasversale sia diretto verso il basso. Dove in tal caso potrebbe essere diretto l'asse principale?
L'asse trasversale può essere diretto da destra a sinistra?
L'asse trasversale può essere diretto dal basso verso l'alto?
Supponiamo che la proprietà flex-direction abbia
valore row. Dove sarà diretto
l'asse principale? Dove sarà diretto
l'asse trasversale?
Supponiamo che la proprietà flex-direction abbia
valore column. Dove sarà diretto
l'asse principale? Dove sarà diretto
l'asse trasversale?
Supponiamo che la proprietà flex-direction abbia
valore row-reverse. Dove sarà diretto
l'asse principale? Dove sarà diretto
l'asse trasversale?
Supponiamo che la proprietà flex-direction abbia
valore column-reverse. Dove sarà
diretto l'asse principale? Dove sarà diretto
l'asse trasversale?