Skip to main content
Home / CSS Almanac / Properties / F / flex-flow

flex-flow

The flex-flow property is a sub-property of the Flexible Box Layout module.

It is a shorthand for flex-direction and flex-wrap.

Syntax

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

.flex-container {
  flex-flow: row 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
Check out this Pen!

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

icon-link icon-logo-star icon-search icon-star