Главна и поперечна оска во флекс блоковите во 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. Каде ќе биде насочена главната оска? Каде ќе биде насочена поперечната оска?