Glavna in prečna os v fleks blokih v CSS
O fleks boksih lahko govorimo v dveh terminih: prvi je - vrstica ali stolpec, drugi - v terminih osi. Z vrsticami in stolpci smo se že ukvarjali, zdaj pa poglejmo osi. Razumevanje osi je potrebno za poravnavo elementov vodoravno ali navpično.
Pri delu s fleks elementi vedno obstajata
glavna os in prečna os. Elemente lahko
poravnamo vzdolž glavne osi in prečno
na glavno os. Glavna os ima lahko 4
smeri: od leve proti desni, od desne proti levi,
od zgoraj navzdol in od spodaj navzgor.
Smer prečne osi je odvisna od smeri glavne: če je glavna os vodoravna, je prečna os usmerjena od zgoraj navzdol, če je glavna os navpična, je prečna usmerjena od leve proti desni. Drugih smeri prečna os ne more imeti.
Smer glavne osi uravnavamo z lastnostjo
flex-direction. Če ima ta lastnost
vrednost row - je glavna os usmerjena
od leve proti desni, če pa je vrednost row-reverse,
potem od desne proti levi. Vrednost column
usmerja os od zgoraj navzdol, vrednost column-reverse
pa od spodaj navzgor.
Recimo, da je glavna os vodoravna. Kam bo usmerjena prečna os?
Recimo, da je glavna os navpična. Kam bo usmerjena prečna os?
Recimo, da je prečna os usmerjena v desno. Kam je lahko v tem primeru usmerjena glavna os?
Recimo, da je prečna os usmerjena navzdol. Kam je lahko v tem primeru usmerjena glavna os?
Ali je lahko prečna os usmerjena od desne proti levi?
Ali je lahko prečna os usmerjena od spodaj navzgor?
Recimo, da ima lastnost flex-direction
vrednost row. Kam bo usmerjena
glavna os? Kam bo usmerjena
prečna os?
Recimo, da ima lastnost flex-direction
vrednost column. Kam bo usmerjena
glavna os? Kam bo usmerjena
prečna os?
Recimo, da ima lastnost flex-direction
vrednost row-reverse. Kam bo usmerjena
glavna os? Kam bo usmerjena
prečna os?
Recimo, da ima lastnost flex-direction
vrednost column-reverse. Kam bo
usmerjena glavna os? Kam bo usmerjena
prečna os?