Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
flex-flow

flex-flow

A shorthand property that sets both 'flex-direction' and 'flex-wrap' together.

Sample Code

/* Horizontal layout, no wrapping (same as initial value) */
.container { display: flex; flex-flow: row nowrap;}

/* Horizontal layout with wrapping */
.container-wrap { display: flex; flex-flow: row wrap;}

/* Vertical layout with wrapping */
.container-col { display: flex; flex-flow: column wrap;}

Available Values

Value	Description
<flex-direction>	One of 'row', 'row-reverse', 'column', or 'column-reverse'. Defaults to 'row' if omitted.
<flex-wrap>	One of 'nowrap', 'wrap', or 'wrap-reverse'. Defaults to 'nowrap' if omitted.

Specification

Item	Details
Initial value	row nowrap
Applies to	Flex containers (elements with 'display: flex' or 'display: inline-flex')
Inherited	No
Animation	No (discrete)

Browser Compatibility

Desktop

Chrome

29+ ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ Requires prefix '-webkit-'

20 or earlier ×

Firefox

28+ ○

27 or earlier ×

Safari

9+ ○

8 △

7 △

↑ Requires prefix '-webkit-'

6 or earlier ×

Edge

12+ ○

Supported in all versions

11 ○

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

12.1+ ○

11 or earlier ×

Mobile

iOS Safari

9+ ○

8 △

7 △

↑ Requires prefix '-webkit-'

6 or earlier ×

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN / Can I Use.

Overview

'flex-flow' is a shorthand property that lets you specify both 'flex-direction' and 'flex-wrap' on one line. Either value can be omitted, in which case the default ('row' or 'nowrap') is applied.

Common Combination Illustrations

Common Combinations

Value	Meaning
flex-flow: row nowrap	Horizontal, no wrapping (default)
flex-flow: row wrap	Horizontal with wrapping (most commonly used)
flex-flow: column nowrap	Vertical, no wrapping
flex-flow: column wrap	Vertical with wrapping
flex-flow: row-reverse wrap	Horizontal reversed with wrapping

Pattern: Responsive Layout

/* Desktop: horizontal with wrapping → Mobile: vertical */
.layout {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}
@media (max-width: 768px) {
    .layout {
        flex-flow: column nowrap;
    }
}

Related Properties

Property	Description
flex-direction	Specifies the direction of the main axis. Corresponds to the first value of 'flex-flow'.
flex-wrap	Specifies wrapping behavior. Corresponds to the second value of 'flex-flow'.

If you find any errors or copyright issues, please contact us.

Home