HTML and CSS Reference
In-Depth Information
MAIN
AXIS,
CROSS
AXIS
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
Main axis
Cross axis
Elements laid out vertically
Cross axis
Main axis
FIGURE 7.9
An illustration of Flexbox's main axis and cross axis.
