Hlavní a příčná osa ve flexboxu v CSS

O flexboxech lze mluvit ve dvou termínech: první je - řádek nebo sloupec, druhé - v termínech os. S řádky a sloupci jsme se již seznámili, pojďme se nyní podívat na osy. Pochopení os je potřeba k tomu, abychom uměli zarovnávat prvky vodorovně nebo svisle.

Při práci s flex prvky vždy existuje hlavní osa a příčná. Prvky můžeme zarovnávat podél hlavní osy a napříč hlavní osou. Hlavní osa může mít 4 směry: zleva doprava, zprava doleva, shora dolů a zdola nahoru.

Směr příčné osy závisí na směru hlavní: pokud je hlavní osa horizontální, pak příčná směřuje shora dolů, pokud je hlavní osa vertikální, pak příčná směřuje zleva doprava. Příčná osa nemůže mít jiné směry.

Směr hlavní osy se řídí vlastností flex-direction. Pokud má tato vlastnost hodnotu row - hlavní osa směřuje zleva doprava, pokud je hodnota row-reverse, tak zprava doleva. Hodnota column směřuje osu shora dolů, a hodnota column-reverse - zdola nahoru.

Předpokládejme, že hlavní osa je vodorovná. Kam bude směřovat příčná osa?

Předpokládejme, že hlavní osa je svislá. Kam bude směřovat příčná osa?

Předpokládejme, že příčná osa směřuje doprava. Kam v takovém případě může směřovat hlavní osa?

Předpokládejme, že příčná osa směřuje dolů. Kam v takovém případě může směřovat hlavní osa?

Může příčná osa směřovat zprava doleva?

Může příčná osa směřovat zdola nahoru?

Předpokládejme, že vlastnost flex-direction má hodnotu row. Kam bude směřovat hlavní osa? Kam bude směřovat příčná osa?

Předpokládejme, že vlastnost flex-direction má hodnotu column. Kam bude směřovat hlavní osa? Kam bude směřovat příčná osa?

Předpokládejme, že vlastnost flex-direction má hodnotu row-reverse. Kam bude směřovat hlavní osa? Kam bude směřovat příčná osa?

Předpokládejme, že vlastnost flex-direction má hodnotu column-reverse. Kam bude směřovat hlavní osa? Kam bude směřovat příčná osa?