CSS propertyFlexbox

flex-flow

A shorthand that combines flex-direction and flex-wrap in one declaration.

Initial value: row nowrap
Inherited: No
Animatable: no
Applies to: flex containers
JavaScript: element.style.flexFlow = "row wrap"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.gallery {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

Preview

Definition and usage

The flex-flow property sets the main axis direction (flex-direction) and wrapping (flex-wrap) at once. You can give the values in any order, and a value you leave out falls back to its default.

flex-flow: row wrap is the most common use: items in a row that wrap onto a new line when needed. It’s shorter, but less readable for beginners, so many projects still write both properties separately.

Like any shorthand, flex-flow overwrites both of its longhand properties, including ones set earlier in other rules.

Syntax

flex-flow: <flex-direction> || <flex-wrap>;

Values

row nowrap
initial
The default value: a single row with no wrapping.
row wrap
A row with wrapping.
column
Just a column, wrapping stays at its default.
row-reverse wrap
A reversed row with wrapping.

Value	Type	Description
row nowrap	initial	The default value: a single row with no wrapping.
row wrap		A row with wrapping.
column		Just a column, wrapping stays at its default.
row-reverse wrap		A reversed row with wrapping.

Values in practice

row nowrap

The default value: a single row with no wrapping.

.demo { flex-flow: row nowrap; }

row wrap

A row with wrapping.

.demo { flex-flow: row wrap; }

column

Just a column, wrapping stays at its default.

.demo { flex-flow: column; }

row-reverse wrap

A reversed row with wrapping.

.demo { flex-flow: row-reverse wrap; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

If your team doesn’t know Flexbox well, write flex-direction and flex-wrap separately. The code will be easier to read.
The shorthand overwrites both properties at once, so watch the order of rules in your stylesheet.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course