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

flex-directionSee flex-direction CSS property for values.
flex-wrapSee flex-wrap CSS property for values.

Example

HTML

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

CSS

.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;
}

Result