Flexbox alignment properties
If you want to play along with this example, start with example_04-06s.
The important thing to understand with Flexbox alignment is the concept of the axis. There are two axes to consider, the main axis and the cross axis. What each of these represents depends on the direction the Flexbox is set to. For example, if the direction of your Flexbox is set to row, the main axis will be the horizontal axis and the cross axis will be the vertical axis.
Conversely, if your Flexbox direction is set to column, the main axis will be the vertical axis and the cross axis will be the horizontal axis. The specification (https://www.w3.org/TR/css-flexbox-1/#box-model) provides the following illustration to aid authors:
Figure 4.7: This image from the specification shows that the main axis always relates to the direction the flex container is heading
Here’s the basic markup of our example you’ll need to add into the example file:
...
