CSS flex-flow Property

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 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-directionDefines the direction in which flex items get displayed within the flex container.
flex-wrapSpecifies whether or not flex items should be wrapped if enough space is not available.
initialSets the flex-flow property to its default value.
inheritInherits the flex-flow property from the parent element.

General Info

Default Valuerow nowrap
InheritedNo
JavaScript Usageelement.style.flexFlow= “row-reverse wrap”