> For the complete documentation index, see [llms.txt](https://irena-popova.gitbook.io/flexbox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irena-popova.gitbook.io/flexbox/flex-flow.md).

# flex-flow

## flex-flow :thinking: 

If  **flex-direction** and **flex-wrap** properties are clear,  you'll get **flex-flow** as well.  It's simply  a shorthand for these two properties 👏

You can set both properties at the same time. Or you can just pass one of them. The default value is row **nowrap**. So if you just set one value, the property that you didn't set will just take on the default value.

```css
.parent {
  flex-flow: row nowrap /* default */
          or <flex-direction> <flex-wrap>
          or <flex-direction>
          or <flex-wrap>
}
```

The **flex-flow** property is a shorthand property for setting both the **flex-direction** and **flex-wrap** properties.&#x20;

```css
.flex-container { display: flex; flex-flow: row wrap; }
```

![](https://1188262252-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MShOB5olIFJqbXrreDC%2F-MShZFeBG8MTgegcuxRz%2F-MShZ_Ux-FmCx2dKTjr3%2Fflex-flow.jpeg?alt=media\&token=81fe4fce-80a1-4a0f-b48b-de28e892fd67)

<br>