CSS flex-flow - flex direction and wrap shorthand

CSS flex-flow – flex direction and wrap shorthand

on Sep 3, 2016

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.

Syntax:

.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

<style>
.fbox {
  display: flex;
  flex-flow: row nowrap;
  width: 200px; height:100px; background-color:gray;
}
.child {
  background-color:green;
  margin: 5px;
}
</style>

<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>
</div>

flex-flow refresh

try it online