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:

row

row-reverse

column

column-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:

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-reverse Value

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

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.