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.