Style flex Flow Property

Style flex-flow property

It specifies the direction of a flex container, as well as its wrapping behavior. It is a shorthand property for setting the flex-direction and flex-wrap individual properties at once.

Browser Support

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

property	chrome	firefox	microsoft edge	Opera
flexflow	yes	yes	11.0	Yes

 

Syntax

Return the flexflow property:

object.style.flexflow

Set the flexflow property:

object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"

Example

Output

 

Click the "click it" button to set the value of the flexFlow property to "column nowrap".

 

Property Values

Value	Description
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	Set this property to its default value.
inherit	Inherits this property from its parent element.

 

Technical Details

Version:	CSS3
Return value	A String, representing the flex-flow property of an element
Default value	row nowrap