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

<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
11	12	29	28	12.1	9
Tablets / Mobile
4.4	29	28	12.1	9	2.0

Last updated by CSSPortal on: 5th November 2019