Hlavná a priečna os vo flexbox v CSS
O flexboxoch možno hovoriť v dvoch termínoch: prvým je riadok alebo stĺpec, druhým - v termínoch osí. S riadkami a stĺpcami sme sa už vysporiadali, poďme sa teraz vysporiadať s osami. Pochopenie osí je potrebné na to, aby sa dali prvky zarovnať horizontálne alebo vertikálne.
Pri práci s flex prvkami vždy existuje
hlavná os a priečna. Prvky môžeme
zarovnávať po hlavnej osi a popriečnej
hlavnej osi. Hlavná os môže mať 4
smery: zľava doprava, sprava doľava,
zhora nadol a zdola nahor.
Smer priečnej osi závisí od smeru hlavnej: ak je hlavná os horizontálna, tak priečna os smeruje zhora nadol, ak je hlavná os vertikálna, tak priečna smeruje zľava doprava. Iné smery priečna os mať nemôže.
Smer hlavnej osi sa reguluje vlastnosťou
flex-direction. Ak má táto vlastnosť
hodnotu row - hlavná os smeruje
zľava doprava, ak je hodnota row-reverse,
tak sprava doľava. Hodnota column
nasmervuje os zhora nadol, a hodnota column-reverse
- zdola nahor.
Nech je hlavná os horizontálna. Kam bude smerovať priečna os?
Nech je hlavná os vertikálna. Kam bude smerovať priečna os?
Nech priečna os smeruje doprava. Kam v takom prípade môže smerovať hlavná os?
Nech priečna os smeruje nadol. Kam v takom prípade môže smerovať hlavná os?
Môže priečna os smerovať sprava doľava?
Môže priečna os smerovať zdola nahor?
Nech vlastnosť flex-direction má
hodnotu row. Kam bude smerovať
hlavná os? Kam bude smerovať
priečna os?
Nech vlastnosť flex-direction má
hodnotu column. Kam bude smerovať
hlavná os? Kam bude smerovať
priečna os?
Nech vlastnosť flex-direction má
hodnotu row-reverse. Kam bude smerovať
hlavná os? Kam bude smerovať
priečna os?
Nech vlastnosť flex-direction má
hodnotu column-reverse. Kam bude
smerovať hlavná os? Kam bude smerovať
priečna os?