HTML and CSS Reference
Before you start doing much work with Flexbox, you should understand the
concept of main axis, cross axis . The main axis is always the axis along which
the flexbox children are arranged, and the cross axis crosses that. Depending
on the direction your content is arranged, these axes will be swapped:
If you are using flex-flow: row; or flex-flow: row-reverse; , the main
axis will be horizontal, and the cross axis will be vertical. This is illus-
trated at the top in Figure 7.9 .
If you are using flex-flow: column; or flex-flow: column-reverse; , the
main axis will be vertical, and the cross axis will be horizontal. This is
illustrated at the bottom in Figure 7.9.
Elements laid out horizontally
Elements laid out vertically
FIGURE 7.9 An illustration of Flexbox's main axis and cross axis.