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.