Glavna i poprečna osa u fleks blokovima u CSS-u
O fleksboksovima se može govoriti u dva termina: prvo je - red ili kolona, drugo - u terminima osa. Sa redovima i kolonama smo već shvatili, hajde sada da shvatimo ose. Razumevanje osa je potrebno kako bi poravnali elemente horizontalno ili vertikalno.
Prilikom rada sa fleks elementima uvek postoji
glavna osa i poprečna. Možemo elemente
poravnati po glavnoj osi i popreko
glavne ose. Glavna osa može imati 4
pravca: s leva na desno, s desna na levo,
odozgo na dole i odozdo na gore.
Pravac poprečne ose zavisi od pravca glavne: ako je glavna osa horizontalna, onda je poprečna usmerena odozgo na dole, ako je glavna osa vertikalna, onda je poprečna usmerena s leva na desno. Drugih pravaca poprečna osa ne može imati.
Pravac glavne ose se reguliše svojstvom
flex-direction. Ako ovo svojstvo
ima vrednost row - glavna osa je usmerena
s leva na desno, ako je vrednost row-reverse,
onda s desna na levo. Vrednost column
usmerava osu odozgo na dole, a vrednost column-reverse
- odozdo na gore.
Neka je glavna osa horizontalna. Gde će biti usmerena poprečna osa?
Neka je glavna osa vertikalna. Gde će biti usmerena poprečna osa?
Neka je poprečna osa usmerena na desno. Gde u tom slučaju može biti usmerena glavna osa?
Neka je poprečna osa usmerena na dole. Gde u tom slučaju može biti usmerena glavna osa?
Da li poprečna osa može biti usmerena s desna na levo?
Da li poprečna osa može biti usmerena odozdo na gore?
Neka svojstvo flex-direction ima
vrednost row. Gde će biti usmerena
glavna osa? Gde će biti usmerena
poprečna osa?
Neka svojstvo flex-direction ima
vrednost column. Gde će biti usmerena
glavna osa? Gde će biti usmerena
poprečna osa?
Neka svojstvo flex-direction ima
vrednost row-reverse. Gde će biti usmerena
glavna osa? Gde će biti usmerena
poprečna osa?
Neka svojstvo flex-direction ima
vrednost column-reverse. Gde će biti
usmerena glavna osa? Gde će biti usmerena
poprečna osa?