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šų.