CSS Flex-direction Properties of flexible elastic box model

Instance

Sets the orientation of the elastic box elements in the <p> element to the opposite order:

P{display:flex;flex-direction:row-reverse;}

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-direction	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-direction property specifies the direction of the flexible project.

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

	row
inherit:	no
can be animated:	No. See SS3 animated Properties, CSS3 animated instances.
version:	CSS3
JavaScript Syntax:	object. style.flexdirection= "Column-reverse" effect preview

CSS syntax

Flex-direction:row|row-reverse|column|column-reverse|initial|inherit;

Property value

value	Description	Example
row	default value. A flexible project will be displayed horizontally, just like a row.	effect preview
row-reverse	same as row, but in reverse order.	effect preview
column	The flexible project will be displayed vertically, just like a column.	effect preview
column-reverse	Same as column, but in reverse order.	effect preview
initial	Set this property to its default value. See initial .	effect preview
inherit	Inherit this property from the parent element. See inherit .