Flexible Box Layout 187
Flexbox Alignment
Flexbox uses two axes for alignment. As shown in Figure 15-2, the main
axis goes in the direction that items are placed, from left to right or top to
bottom. When the value of flex-direction is row, the main axis is horizontal;
when it is column, the main axis is vertical. The cross axis is the line that runs
perpendicular to the main axis: it’s vertical when the direction is row and
horizontal when it’s column.
flex-direction: row
Main axis
Cross axis
flex-direction: column
Cross axis
Main axis
Figure 15-2: The main and cross axes depend on the direction of the layout
of the flex children.
When dealing with flex containers and items, you’ll often see points
referred to as the start and end of axes. Because flex axes can be reversed
(from top to bottom or bottom to top, and left to right or right to left), you
use start and end rather than relative directions to prevent confusion. For
example, when the main axis is horizontal and the direction is from left to
right, the start of the main axis is the left and the end is the right; but if the
main axis is vertical, the start of the main axis is at the top and the end is at
the bottom (or vice versa if reversed).
Reversing the Content Order
One of Flexbox’s great capabilities is that you can quickly change the
order in which items are displayed, regardless of their order in the DOM.
For example, Figure 15-1 shows two items laid out in a row, in the order in
which they’re declared in the DOM. What if you want to change their order
so #b comes before #a?
You can do this quickly with the flex-direction property, using the value
row-reverse to reverse the order in which the flex items are displayed, as
shown here. (The column-reverse property value reverses the order of flex
items vertically displayed in columns.)
E { flex-direction: row-reverse; }
