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.

Задание 1

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

Задание 2

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

Задание 3

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

Задание 4

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

Задание 5

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

Задание 6

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

Задание 7

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

Задание 8

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

Задание 9

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

Задание 10

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