Flexbox Direction
You can specify whether flex items run in rows or columns. You can also make them run in reverse order.
The flex-direction property allows you to set the direction that the flex items will run within their flex container. It accepts the following values:
rowrow-reversecolumncolumn-reverse
These are relatively straightforward — they let you specify whether the flex items are arranged in rows or columns and in reverse order or not. But, the ultimate direction does depend on the writing mode.
The row Value
This is the initial value. So if you don't set this property, this is the value that's used.
Note that row doesn't always mean horizontal. The writing mode determines whether a row goes horizontally or vertically. When using a vertical writing mode, a row will have its flex items laid out from top to bottom.
Here's what happens if we apply writing-mode: vertical-rl to the above example:
And here's what happens if we add direction: rtl to that example:
And if we take it a step further, here's what text-orientation: upright does to that example:
So even with a single flex direction value, there are still a lot of variations available for how the flex items are actually presented, aligned, and orientated, depending on which other properties you use.
This same principle applies to all the other flex-direction values below.
The row-reverse Value
You can use flex-direction: row-reverse to have the items appear in reverse order along the row.
The column Value
Using flex-direction: column changes the distribution of flex items so that they're arranged in columns.
The column-reverse Value
And flex-direction: column-reverse value sets the items to appear in reverse order along the column.
Wrapping Flex Items
You can use the flex-wrap property to define how the flex items wrap within their flex container.
By default, flex items don't wrap. If they're too wide to fit into the flex container, they'll simply shrink until they can all fit in. The text inside the flex items can still wrap, but just not the flex items themselves.
The nowrap Value
Here's what I mean (this is the default behavior):
The flex items in this example all have a width of 60%. That's 60 percent of the width of the flex container. You can't fit two items next to each other of that width, let alone three. But because the initial flex-wrap value is nowrap the items don't wrap. They shrink instead.
The wrap Value
Now let's add flex-wrap: wrap:
The wrap-reverse Value
Now let's add flex-wrap: wrap-reverse:
The flex-flow Property
The flex-flow property is shorthand for the flex-direction and flex-wrap properties, so you can specify both at once.
Here's an example: