Главна и напречна ос във флекс блоковете в CSS

За флексбоксовете може да се говори в два термина: първото е - ред или колона, второто - в термини на оси. С редове и колони вече се запознахме, нека сега разберем осите. Разбирането на осите е необходимо, за да подравняваме елементи хоризонтално или вертикално.

При работа с флекс елементи винаги съществува главна ос и напречна. Можем да подравняваме елементите по главната ос и напречно на главната ос. Главната ос може да има 4 посоки: отляво надясно, от дясно наляво, отгоре надолу и отдолу нагоре.

Посоката на напречната ос зависи от посоката на главната: ако главната ос е хоризонтална, то напречната е насочена отгоре надолу, ако главната ос е вертикална, то напречната е насочена отляво надясно. Други посоки напречната ос не може да има.

Посоката на главната ос се регулира от свойството flex-direction. Ако това свойство има стойност row - главната ос е насочена отляво надясно, ако стойността е row-reverse, то от дясно наляво. Стойността column насочва оста отгоре надолу, а стойността column-reverse - отдолу нагоре.

Задание 1

Нека главната ос е хоризонтална. Накъде ще бъде насочена напречната ос?

Задание 2

Нека главната ос е вертикална. Накъде ще бъде насочена напречната ос?

Задание 3

Нека напречната ос е насочена надясно. Накъде в такъв случай може да бъде насочена главната ос?

Задание 4

Нека напречната ос е насочена надолу. Накъде в такъв случай може да бъде насочена главната ос?

Задание 5

Може ли напречната ос да бъде насочена от дясно наляво?

Задание 6

Може ли напречната ос да бъде насочена отдолу нагоре?

Задание 7

Нека свойството flex-direction има стойност row. Накъде ще бъде насочена главната ос? Накъде ще бъде насочена напречната ос?

Задание 8

Нека свойството flex-direction има стойност column. Накъде ще бъде насочена главната ос? Накъде ще бъде насочена напречната ос?

Задание 9

Нека свойството flex-direction има стойност row-reverse. Накъде ще бъде насочена главната ос? Накъде ще бъде насочена напречната ос?

Задание 10

Нека свойството flex-direction има стойност column-reverse. Накъде ще бъде насочена главната ос? Накъде ще бъде насочена напречната ос?