In this section, we will learn what the flex-flow property is and how to use it in CSS.

Click here to run the example of flex-flow property.

CSS flex-flow Property Definition and Usage

The CSS `flex-flow` is the shorthand property for assigning values to `flex-direction` and `flex-wrap` properties, respectively. These two values together define flex-container’s Main and Cross axes.

CSS flex-flow Property Syntax

flex-flow: f-direction f-wrap;

CSS flex-flow Property Value

• f-direction: Using this value, we can set the value for the `flex-direction` property. It takes the same values that we use for `flex-direction property. This value is optional and, if ignored, the default value, which is “row” will be used.
• f-wrap: Using this value, we can set the value for the `flex-wrap` property. It takes the same values that we use for `flex-wrap` property. Also, this value is optional and if ignored, the default value which is “nowrap” will be used.

Example: flex-flow property in CSS

See the Pen flex-flow property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.