Flex Flow Shorthand Property
Last updated: 2026-09-13
flex-flow Flex Flow Shorthand Property
flex-flow is a shorthand for the flex-direction and flex-wrap properties. It defines the direction of the main axis and whether the items wrap, in a single declaration. Since the two properties are almost always used together, flex-flow keeps the code more concise. Its default value is row nowrap, that is, horizontal arrangement without wrapping.
| Category | |
|---|---|
| Initial Value | row nowrap |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex-flow: <flex-direction> || <flex-wrap>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<flex-direction> || <flex-wrap> | Value | Direction and wrapping shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-flow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： The two values of flex-flow can be written in any order: flex-flow: wrap column is equivalent to flex-flow: column wrap. The browser recognizes both.
Tip： Because flex-direction and flex-wrap are almost always set together, prefer the flex-flow shorthand for better readability and faster writing.
❓ FAQ
QCan flex-flow have only one value?
AYes. With a single value the browser decides by its type: a direction value such as row or column leaves flex-wrap at the default nowrap, while a wrapping value such as wrap or nowrap leaves flex-direction at the default row. This behavior is defined in the spec, so you rarely need to write both values when one of them already matches the default.
QIs there a performance difference between flex-flow and setting flex-direction and flex-wrap separately?
ANo. flex-flow is purely a syntactic shorthand: after parsing, it has exactly the same effect as writing flex-direction and flex-wrap separately. The choice is a matter of code style. When you set both semantics at once, flex-flow is more compact; when you need to override a single property, for example changing only the wrapping inside a media query, the longhand form makes local edits easier.
QIs there a difference between flex-flow: column wrap and flex-flow: wrap column?
ANo. flex-flow is the shorthand for flex-direction and flex-wrap, and the spec uses || to indicate that the two values may be written in either order, so column wrap and wrap column are equivalent. This interchangeable order is a purely syntactic convenience of the shorthand grammar; it has no effect on the computed values or on performance. Note that with a column main axis, wrapping happens in the horizontal direction and the new columns stack to the right.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Main Axis Direction
Defines the direction of the main axis in a flex layout
Flex Wrap
Controls whether flex items wrap onto multiple lines
