CSS flex-flow property specifies the direction and wrapping behavior of flex items within their flex container. It is a shorthand of the below two flexbox properties:
A shorthand property combines two or more properties into a single property which helps us reducing the code.
In the example below, the flex items get displayed in the reverse direction and wrap up onto multiple lines if enough space is not available.
Example:
.flex-container{
display: flex;
flex-flow: row-reverse wrap;
}
CSS Syntax
The flex-flow property has the following syntax:
flex-flow: flex-direction flex-wrap|initial|inherit;
Property Values
The flex-flow property accepts the following values:
| flex-direction | Defines the direction in which flex items get displayed within the flex container. |
| flex-wrap | Specifies whether or not flex items should be wrapped if enough space is not available. |
| initial | Sets the flex-flow property to its default value. |
| inherit | Inherits the flex-flow property from the parent element. |
General Info
| Default Value | row nowrap |
| Inherited | No |
| JavaScript Usage | element.style.flexFlow= “row-reverse wrap” |
