CSS flex-flow – flex direction and wrap shorthand

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties. It is flex container property. The default value is row nowrap.


.someflexcontainer {
  display: flex;
  flex-flow: row nowrap;

Example – flex-flow

In the following code, CSS property flex-flow can be changed to the following values
  • row nowrap
  • row wrap
  • column nowrap
  • column wrap
.fbox {
  display: flex;
  flex-flow: row nowrap;
  width: 200px; height:100px; background-color:gray;
.child {
  margin: 5px;

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2 longer text</div>
<div class="child">div3</div>
<div class="child">div4</div>
flex-flow refresh

Specification and Browser compatibility

Flexible Box Layout ModuleW3C Working DraftCSS3
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments