Pagrindinė ir skersinė ašys CSS flex blokuose
Apie flexbox'us galima kalbėti dviem terminais: pirmasis yra eilutė ar stulpelis, antrasis - ašių terminais. Su eilutėmis ir stulpeliais jau susipažinome, dabar panagrinėkime ašis. Ašių supratimas reikalingas norint lygiuoti elementus horizontaliai arba vertikaliai.
Dirbant su flex elementais visada egzistuoja
pagrindinė ašis ir skersinė. Mes galime elementus
lygiuoti pagal pagrindinę ašį ir skersai
pagrindinės ašies. Pagrindinė ašis gali turėti 4
kryptis: iš kairės į dešinę, iš dešinės į kairę,
iš viršaus į apačią ir iš apačios į viršų.
Skersinės ašies kryptis priklauso nuo pagrindinės ašies krypties: jei pagrindinė ašis horizontali, tai skersinė nukreipta iš viršaus į apačią, jei pagrindinė ašis vertikali, tai skersinė nukreipta iš kairės į dešinę. Kitų krypčių skersinė ašis turėti negali.
Pagrindinės ašies kryptis reguliuojama savybe
flex-direction. Jei ši savybė
turi reikšmę row - pagrindinė ašis nukreipta
iš kairės į dešinę, jei reikšmė row-reverse,
tai iš dešinės į kairę. Reikšmė column
nukreipia ašį iš viršaus į apačią, o reikšmė column-reverse
- iš apačios į viršų.
Tarkime, pagrindinė ašis horizontali. Kur bus nukreipta skersinė ašis?
Tarkime, pagrindinė ašis vertikali. Kur bus nukreipta skersinė ašis?
Tarkime, skersinė ašis nukreipta į dešinę. Kur tokiu atveju gali būti nukreipta pagrindinė ašis?
Tarkime, skersinė ašis nukreipta žemyn. Kur tokiu atveju gali būti nukreipta pagrindinė ašis?
Ar skersinė ašis gali būti nukreipta iš dešinės į kairę?
Ar skersinė ašis gali būti nukreipta iš apačios į viršų?
Tarkime, savybė flex-direction turi
reikšmę row. Kur bus nukreipta
pagrindinė ašis? Kur bus nukreipta
skersinė ašis?
Tarkime, savybė flex-direction turi
reikšmę column. Kur bus nukreipta
pagrindinė ašis? Kur bus nukreipta
skersinė ašis?
Tarkime, savybė flex-direction turi
reikšmę row-reverse. Kur bus nukreipta
pagrindinė ašis? Kur bus nukreipta
skersinė ašis?
Tarkime, savybė flex-direction turi
reikšmę column-reverse. Kur bus
nukreipta pagrindinė ašis? Kur bus nukreipta
skersinė ašis?