Detailed CSS Flex-flow properties for flexible elastic box model

Instance

Let the elements of the elastic box appear in reverse order, and split the lines when necessary:

1. Display : Flex ;

2. Flex - Flow : Row - Reverse Wrap ;

Effect Preview

Browser support

The number in the table represents the version number of the first browser that supports the property.

The number immediately following the-webkit-,-ms-or-moz-is the first version that supports the prefix attribute.

Properties
flex-flow	29.0 21.0-webkit-	11.0 10.0-ms-	28.0 18.0-moz-	9.0 6.1-webkit-	17.0

Definition and usage

The Flex-flow property is a composite property of the Flex-direction and Flex-wrap properties.

The Flex-flow property is used to set or retrieve the arrangement of child elements of a flexible box model object.

The Flex-direction property specifies the direction of the flexible project.

The Flex-wrap property specifies whether flexible items are split or split.

Note: The Flex-flow property does not work if the element is not an element of the elastic box object.

Default value:	Row nowrap
inherit:	no
can be animated:	No. See SS3 animated Properties, CSS3 animated instances.
version:	CSS3
JavaScript Syntax:	object. style.flexflow= "column nowrap" effect preview

CSS syntax

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

Property value

value	Description
flex-direction	possible value: Row row-reverse Column column-reverse Initial Inherit
flex-wrap	possible values: nowrap Wrap wrap-reverse Initial inherit
initial	Set this property to its default value. See initial .
inherit	Inherit this property from the parent element. See inherit .