CSS flex-flow Property

Example

Make the flexible items display in reverse order, and wrap if necessary:

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

Definition and Usage

The flex-flow property is a shorthand property for:

• flex-direction - It sets the direction of flex-items position.
• flex-wrap - It wraps the flex-items to next line.

Note: If the elements are not flexible items, the flex-flow property has no effect.

Default value:	row nowrap
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.flexFlow="column nowrap"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which flex-flow is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-flow	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS Syntax

flex-flow: flex-direction flex-wrap|initial|inherit;

Property Values

Value	Description	Play it
flex-direction	Possible values: row row-reverse column column-reverse initial inherit Default value is "row". Specifying the direction of the flexible items
flex-wrap	Possible values: nowrap wrap wrap-reverse initial inherit Default value is "nowrap". Specifying whether the flexible items should wrap or not
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.