The **`flex-flow`** property in #key# CSS: Cascade Style Sheets #key# is used to define the main and the cross axes of the flex container.
It is a shorthand property of the following:

- `flex-direction`
- `flex-wrap`


>Note: This property has no effect on non-flexible items. 

# 
#  Syntax


```css
flex-flow: flex-direction flex-wrap|initial|inherit;
```

# 
## Property values

- **`flex-direction`**: This value is used to specify the direction of the flex items. Possible values of the `flex-direction` are: `row`, `row-reverse`, `column`, and `column-reverse`.

- **`flex-wrap`**: This value is used to specify whether we want to wrap the flex items or not. Possible values of the `flex-wrap` are: `wrap`, `nowrap`, and `wrap-reverse`.

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

- **`inherit`**: This value 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-flow` property is as follows:

.outer
{
  height: 200px;
  font: 100 24px/200px sans-serif;
  text-align: center;
  color: white;
  display: flex;
  flex-flow: 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 made three boxes and set the `flex-flow` to `row-reverse` in line 8. Therefore, we can see that all the boxes appear in the reverse direction in the output. We can set the `flex-flow` of our choice. 

What is the CSS flex-flow property?

The CSS flex-flow property defines the main and cross axes of a flex container using flex-direction and flex-wrap properties.