The Flex Container Properties
I established some fundamental principles. What flex-containers and flex-items are, and how to initiate the Flexbox model.
Having set a parent element as a flex container, a couple of alignment properties are made available to be used on the flex container.
Just like you’d define the width property on a block element as width: 200px, there are 6 different properties the flex container can take on.
The good news is that defining these properties doesn’t require a different approach from what you’re already used to.
1. Flex-direction
The Flex-direction property controls the direction in which the flex-items are laid along the main axis.
It may take any of four values.
/*where ul represents a flex container*/ul {flex-direction: row || column || row-reverse || column-reverse;}
In layman’s terms, the flex-direction property let’s you decide how the flex items are laid out. Either horizontally, vertically or reversed in both directions.
Technically, “horizontal” and “vertical” isn’t what the directions are called in the “flex world”.
These are described as main-axis and cross axis. The defaults are shown below.
In layman’s terms again, the main-axis’ default direction feels like “horizontal.” From left to right.
The cross-axis feels like “vertical.” From top to bottom.
By default, the flex-direction property is set to row and it aligns the flex-item(s) along the main axis. This explains what happened with the unordered list at the start of this article.
Even though the flex-direction property wasn’t explicitly set, it took on the default value of row.
The flex items were then laid across the main-axis, stacking horizontally from left to right
If the flex-direction property is changed to column, the flex-items will be aligned along the cross axis.
They would stack ...