Eixo Principal e Eixo Transversal em Flexboxes no CSS

Podemos falar sobre flexboxes em dois termos: primeiro - linha ou coluna, segundo - em termos de eixos. Já abordamos linhas e colunas, agora vamos entender os eixos. Compreender os eixos é necessário para alinhar elementos horizontalmente ou verticalmente.

Ao trabalhar com elementos flex, sempre existe um eixo principal e um eixo transversal. Podemos alinhar os elementos ao longo do eixo principal e perpendicularmente ao eixo principal. O eixo principal pode ter 4 direções: da esquerda para a direita, da direita para a esquerda, de cima para baixo e de baixo para cima.

A direção do eixo transversal depende da direção do eixo principal: se o eixo principal é horizontal, o eixo transversal é direcionado de cima para baixo; se o eixo principal é vertical, o eixo transversal é direcionado da esquerda para a direita. O eixo transversal não pode ter outras direções.

A direção do eixo principal é controlada pela propriedade flex-direction. Se esta propriedade tem o valor row - o eixo principal é direcionado da esquerda para a direita; se o valor for row-reverse, então da direita para a esquerda. O valor column direciona o eixo de cima para baixo, e o valor column-reverse - de baixo para cima.

Suponha que o eixo principal seja horizontal. Para onde será direcionado o eixo transversal?

Suponha que o eixo principal seja vertical. Para onde será direcionado o eixo transversal?

Suponha que o eixo transversal seja direcionado para a direita. Para onde, nesse caso, o eixo principal pode estar direcionado?

Suponha que o eixo transversal seja direcionado para baixo. Para onde nesse caso, o eixo principal pode estar direcionado?

O eixo transversal pode ser direcionado da direita para a esquerda?

O eixo transversal pode ser direcionado de baixo para cima?

Suponha que a propriedade flex-direction tenha o valor row. Para onde será direcionado o eixo principal? Para onde será direcionado o eixo transversal?

Suponha que a propriedade flex-direction tenha o valor column. Para onde será direcionado o eixo principal? Para onde será direcionado o eixo transversal?

Suponha que a propriedade flex-direction tenha o valor row-reverse. Para onde será direcionado o eixo principal? Para onde será direcionado o eixo transversal?

Suponha que a propriedade flex-direction tenha o valor column-reverse. Para onde será direcionado o eixo principal? Para onde será direcionado o eixo transversal?