The **`flex-direction`** property in #key# CSS: Cascade Style Sheets #key# is used to define the direction or sequence of the flex items.



> There is no effect of this property on non-flexible items. 

# 
#  Syntax

---
```css
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
```
---

# 
## Property values

- **`row`**:  It is the default value. It is used to display the flex items in a row. The items are displayed horizontally.

- **`row-reverse`**: It is used to display the items in a row but in reverse order.

- **`column`**:  It is used to display the flex items in a column. The items are displayed vertically.

- **`column-reverse`**: It is used to display the items in a column but in reverse order.



- **`initial`**: It sets the value to its default value.

- **`inherit`**: It inherits the property from its parent value.

##
## Code

The basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `flex-direction` property is as follows:

.outer
{
  height: 200px;
  font: 100 24px/200px sans-serif;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: row-reverse;
}	
.outer div 
{
  width: 33%;
}
.box1
{
  background: rgb(34, 107, 46);
}
.box2
{
  background: rgb(33, 115, 147);
}
.box3
{
  background: rgb(56, 34, 98);
}

codemirror

In this example, we can see that we have made 3 boxes and set the `flex-direction` to `row-reverse` in line 8. We can see that all the boxes appear in the reverse direction in the output. We can set the `flex-direction` of our choice. 

What is the CSS flex-direction property?

Defines flex item direction: row, row-reverse, column, column-reverse, initial, or inherit.