flex-flow

Summary

The flex-flow CSS property defines the flex container’s main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties.

Overview table

Initial value

See individual properties.

Applies to

flex containers

Inherited

No

Media

visual

Computed value

See individual properties.

Animatable

No

CSS Object Model Property

flexFlow

Syntax

• flex-flow: <flex-direction> <flex-wrap>

Values

<flex-direction> <flex-wrap>

The shorthand value includes the values of the following properties:

• flex-direction
• flex-wrap

Examples

Displaying children in a row wrapping to the next line.

.list {
  display: flex;
  flex-flow: row wrap;
}

.list div {
  flex: 1;
}

View live example

The Holy Grail Layout example.

flex-flow: row;

View live example

Related specifications

CSS Flexible Box Layout Module

Candidate Recommendation

See also

Related articles

Flexbox

• align-content

• align-items

• align-self

• break-before

• flex

• flex-basis

• flex-direction

• flex-flow

• flex-grow

• flex-shrink

• flex-wrap

• justify-content

External resources

Also, check out the following live demo sites:

• Flexbox Playground
• Flexy Boxes