CSS flex-flow Property

Description

The flex-flow property allows you to specify flex-direction property values ​​in a single declaration (sets the direction in which the flex elements are located inside the flex container), and flex-wrap (determines whether the flex container will be single-line or multi-line). Before using the flex-flow property in work, I recommend that you familiarize yourself with the listed properties individually.

Initial value
See individual properties
Applies to
Flex containers
Inherited
No
Media
Visual
Computed value
See individual properties
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.flexFlow

Syntax

flex-flow: flex-direction || flex-wrap

Values

Example

<h3>flex-flow: row nowrap;</h3> 
<div class="container"><div>A</div><div>B</div><div>C</div></div>
<h3>flex-flow: row-reverse wrap-reverse;</h3>
<div class="container2"><div>A</div><div>B</div><div>C</div></div>
<h3>flex-flow: row-reverse wrap;</h3>
<div class="container3"><div>A</div><div>B</div><div>C</div></div>
.container {
   display: -webkit-flex; 
   display: flex; 
   -webkit-flex-flow: wrap-reverse;
   flex-flow: row nowrap;
}
.container2 {
   display: -webkit-flex;
   display: flex; 
   -webkit-flex-flow: wrap-reverse;
   flex-flow: row-reverse wrap-reverse; 
} 
.container3 {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: wrap-reverse;
   flex-flow: row-reverse wrap;
} 
div>div {
   width: 40%;
   height: 25px; 
   border: 1px solid orange; 
   background: white;
} 

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112292812.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292812.19?