Huvud- och tväraxel i flexbox i CSS

Om flexbox kan man tala i två termer: första är - rad eller kolumn, andra - i termer av axlar. Med rader och kolumner har vi redan klarat av, låt oss nu gå igenom axlar. Förståelse för axlar behövs för att justera element horisontellt eller vertikalt.

När man arbetar med flex-element finns det alltid en huvudaxel och en tväraxel. Vi kan justera elementen längs huvudaxeln och tvärs över huvudaxeln. Huvudaxeln kan ha 4 riktningar: från vänster till höger, från höger till vänster, från topp till botten och från botten till topp.

Riktningen för tväraxeln beror på huvudaxelns riktning: om huvudaxeln är horisontell, så är tväraxeln riktad från topp till botten, om huvudaxeln är vertikal, så är tväraxeln riktad från vänster till höger. Andra riktningar kan tväraxeln inte ha.

Riktningen för huvudaxeln regleras av egenskapen flex-direction. Om denna egenskap har värdet row - är huvudaxeln riktad från vänster till höger, om värdet är row-reverse, så från höger till vänster. Värdet column riktar axeln från topp till botten, och värdet column-reverse - från botten till topp.

Задание 1

Antag att huvudaxeln är horisontell. Vart kommer tväraxeln att vara riktad?

Задание 2

Antag att huvudaxeln är vertikal. Vart kommer tväraxeln att vara riktad?

Задание 3

Antag att tväraxeln är riktad åt höger. Vart kan i så fall huvudaxeln vara riktad?

Задание 4

Antag att tväraxeln är riktad nedåt. Vart kan i så fall huvudaxeln vara riktad?

Задание 5

Kan tväraxeln vara riktad från höger till vänster?

Задание 6

Kan tväraxeln vara riktad från botten till topp?

Задание 7

Antag att egenskapen flex-direction har värdet row. Vart kommer huvudaxeln att vara riktad? Vart kommer tväraxeln att vara riktad?

Задание 8

Antag att egenskapen flex-direction har värdet column. Vart kommer huvudaxeln att vara riktad? Vart kommer tväraxeln att vara riktad?

Задание 9

Antag att egenskapen flex-direction har värdet row-reverse. Vart kommer huvudaxeln att vara riktad? Vart kommer tväraxeln att vara riktad?

Задание 10

Antag att egenskapen flex-direction har värdet column-reverse. Vart kommer huvudaxeln att vara riktad? Vart kommer tväraxeln att vara riktad?