CSS flex-flow Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.flexFlow

Interactive Demo

flex-flow: row wrap;

flex-flow: row-reverse nowrap;

flex-flow: column wrap-reverse;

flex-flow: column wrap;

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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

Editor