flex-flow

Avatar of
on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

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

IEEdgeFirefoxChromeSafariOpera
10 1
11
All20-48 2
49+ 3
21-28 4
29+
7-8 4
9+
12.1+
iOS
Safari
Chrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
7-8.4 4
9+
92+90+92+12.1+
Source: caniuse
  • 1 Supported with prefix -ms
  • 2 Partial support
  • 3 Supported with prefix -moz-
  • 4 Supported with prefix -webkit-

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