flex-flow CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
Try it
flex-flow: row wrap;
flex-flow: row-reverse nowrap;
flex-flow: row wrap balance;
flex-flow: column wrap-reverse;
flex-flow: column wrap;
flex-flow: column balance wrap;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
<div>Item Seven</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
max-height: 300px;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 5px 10px;
}
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
flex-flow: wrap balance;
flex-flow: balance wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
flex-flow: row-reverse balance wrap
/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
Values
This property is specified as a space-separated list of keywords of the following types:
flex-direction-
A keyword specifying the main axis and direction of how flex items are placed in the flex container.
flex-wrap-
One or two keywords specifying whether flex items can wrap onto multiple lines, and, if wrapping is allowed, sets the direction that lines are stacked and whether they are balanced.
Description
The flex-flow shorthand property specifies the flex-direction and flex-wrap properties, defining the direction of a flex container and its wrapping behavior. It can also define flex items to be balanced when wrapping is allowed.
For example, column-reverse wrap will set the main-axis to the block direction with a reversed main-start and main-end, with flex items being allowed to wrap, creating new lines if needed.
.container {
flex-flow: column-reverse wrap;
}
To distribute the flex items evenly across each flex line, you can include the flex-wrap keyword balance in addition to wrap:
.container {
flex-flow: column-reverse wrap balance;
}
Formal definition
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | flex containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Formal syntax
flex-flow =
<'flex-direction'> ||
<'flex-wrap'>
<flex-direction> =
row |
row-reverse |
column |
column-reverse
<flex-wrap> =
nowrap |
[ wrap | wrap-reverse ] || balance
Examples
Basic usage
This example demonstrates using the flex-flow shorthand on a flex container so the items are laid out backwards across multiple rows.
HTML
We include a list of words in alphabetical order:
<ul>
<li>Alphabet</li>
<li>Banana</li>
<li>Crayons</li>
<li>Dinosaurs</li>
<li>Eggplant</li>
<li>Foundation</li>
<li>Ghosts</li>
<li>Happy</li>
<li>Igloo</li>
<li>Janitors</li>
<li>Kittens</li>
<li>Lasso</li>
<li>Magic 8-ball</li>
<li>Nincompoop</li>
<li>Orange</li>
<li>Petunia</li>
<li>Quality</li>
<li>Rancid</li>
<li>Shoelace</li>
<li>Terydactyl</li>
<li>Umbrella</li>
<li>Valentine</li>
<li>Westward</li>
<li>Xylophone</li>
</ul>
CSS
We set the <ul> to be a flex container with the display property, define a width, add a gap so there is some room between flex items and flex lines, and then set the flex-flow to wrap the items in reverse order. Additional CSS has been hidden for brevity.
ul {
display: flex;
width: 31em;
gap: 1em;
flex-flow: row-reverse wrap-reverse;
}
Result
Specifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |