The flex-flow property is a sub-property of the Flexible Box Layout module. It is a shorthand for flex-direction and flex-wrap.

.element {
  flex-flow: row wrap;
}

Syntax

flex-flow: <‘flex-direction’> || <‘flex-wrap>;

You can specify one or two values, no matter the order.

Demo

Both lists behave in the exact same way:

• The blue one has flex-direction: row and flex-wrap: wrap
• The red one has flex-flow: row wrap

Browser support

For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.

More information

• CSS Flexible Box Layout Module Level 1
• MDN documentation
• Advanced cross-browser flexbox
• A guide to Flexbox
• Using Flexbox
• Old Flexbox and new Flexbox