Main and Cross Axes in CSS Flexbox
Flexbox can be discussed in two terms: the first is a row or a column, the second is in terms of axes. We have already dealt with rows and columns, let's now deal with axes. Understanding axes is necessary in order to align elements horizontally or vertically.
When working with flex elements, there is always a main axis and a cross axis. We can align elements along main axis and across the main axis. The main axis can have 4 directions: left to right, right to left, top to bottom, and bottom to top.
The direction of the transverse axis depends on the direction of the main axis: if the main axis is horizontal, then the transverse axis is directed from top to bottom, if the main axis is vertical, then the transverse axis is directed from left to right. The transverse axis cannot have other directions.
The direction of the main axis is controlled by the flex-direction property. If this property has a value of row, the main axis is directed from left to right, and if the value is row-reverse, then from right to left. The value column directs the axis from top to bottom, and the value column-reverse directs it from bottom to top.
Let the main axis be horizontal. Where will the transverse axis point?
Let the main axis be vertical. Where will the transverse axis point?
Let the transverse axis be directed to the right. Where can the main axis be directed in this case?
Let the transverse axis be directed downwards. Where then can the main axis be directed?
Can the transverse axis be directed from right to left?
Can the transverse axis be directed from bottom to top?
Let's say the flex-direction property has the value row. Which way will the main axis point? Which way will the cross axis point?
Let's say the flex-direction property has the value column. Which way will the main axis point? Which way will the cross axis point?
Let's say the flex-direction property has the value row-reverse. Which way will the main axis point? Which way will the cross axis point?
Let's say the flex-direction property has the value column-reverse. Which way will the main axis point? Which way will the cross axis point?
