You can specify whether flex items run in rows or columns. You can also make them run in reverse order.
flex-direction property allows you to set the direction that the flex items will run within their flex container. It accepts the following values:
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.
This is the initial value. So if you don't set this property, this is the value that's used.
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.
You can use
flex-direction: row-reverse to have the items appear in reverse order along the row.
flex-direction: column changes the distribution of flex items so that they're arranged in columns.
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.
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.
Now let's add
Now let's add
Here's an example: