CSS Property flex-flow

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

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

The flex-direction property sets the direction of the flexible items.

The flex-wrap property sets whether to wrap the flexible items.

Summary

Initial value: row nowrap
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.flexFlow="column nowrap"
Animatable: no

CSS Syntax

flex-flow: flex-direction flex-wrap|initial|inherit;

Property Values

flex-direction: Sets the direction of the flexible items Possible values:row|row-reverse|column|column-reverse|initial|inherit Default value is "row".
flex-wrap: Sets whether the flexible items should wrap or not. Possible values:nowrap|wrap|wrap-reverse|initial|inherit. Default value is "nowrap".

Browser compatibility


`flex-flow`	Yes	11.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--   www. j a v a 2  s. c  o m-->
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: row wrap;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:red;">A</div>
  <div style="background-color:blue;">B</div>
  <div style="background-color:tomato;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:grey;">E</div>
  <div style="background-color:green;">F</div>
</div>

</body>
</html>

Click to view the demo

Example 2

<!DOCTYPE html>
<html>
<style>
.flex-container {<!-- ww  w .jav  a2  s.  c o m-->
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

h1 {
  padding-left: .5em; 
}

.shorthand { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.longhand { 
  -webkit-flex-flow: wrap row;
  flex-flow: wrap row;
  
}

.longhand li {
  background: blue;
}

.flex-item {
  background: red;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
}
</style>
</head>
<body>
<h1>flex-wrap: wrap; flex-direction: row;</h1>
<ul class="flex-container longhand">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
</ul>

<h1>flex-flow: row wrap;</h1>
<ul class="flex-container shorthand">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
</ul>
</body>
</html>

Click to view the demo