Põhi- ja risttelg CSS-i flex konteinerites
Flexbox'idest võib rääkida kahes terminoloogias: esiteks - rida või veerg, teiseks - telgede terminites. Ridade ja veergudega oleme juba tegelenu, nüüd käsitleme telgesid. Telgede mõistmist on vaja elementide joondamiseks horisontaalselt või vertikaalselt.
Flex-elementidega töötamisel on alati olemas
põhitelg ja risttelg. Me saame elemente
joondada piki põhitelge ja põhiteljega risti.
Põhiteljel võib olla 4
suunda: vasakult paremale, paremalt vasakule,
ülevalt alla ja alt üles.
Risttelje suund sõltub põhitelje suunast: kui põhitelg on horisontaalne, siis risttelg on suunatud ülevalt alla, kui põhitelg on vertikaalne, siis risttelg on suunatud vasakult paremale. Muid suundi ristteljel olla ei saa.
Põhitelje suunda reguleerib omadus
flex-direction. Kui sellel omadusel
on väärtus row - on põhitelg suunatud
vasakult paremale, kui väärtus on row-reverse,
siis paremalt vasakule. Väärtus column
suunab telje ülevalt alla, ja väärtus column-reverse
- alt üles.
Oletame, et põhitelg on horisontaalne. Kuhu on suunatud risttelg?
Oletame, et põhitelg on vertikaalne. Kuhu on suunatud risttelg?
Oletame, et risttelg on suunatud paremale. Kuhu sel juhul võib olla suunatud põhitelg?
Oletame, et risttelg on suunatud alla. Kuhu sel juhul võib olla suunatud põhitelg?
Kas risttelg võib olla suunatud paremalt vasakule?
Kas risttelg võib olla suunatud alt üles?
Oletame, et omadusel flex-direction on
väärtus row. Kuhu on suunatud
põhitelg? Kuhu on suunatud
risttelg?
Oletame, et omadusel flex-direction on
väärtus column. Kuhu on suunatud
põhitelg? Kuhu on suunatud
risttelg?
Oletame, et omadusel flex-direction on
väärtus row-reverse. Kuhu on suunatud
põhitelg? Kuhu on suunatud
risttelg?
Oletame, et omadusel flex-direction on
väärtus column-reverse. Kuhu on
suunatud põhitelg? Kuhu on suunatud
risttelg?