CSS flex-direction and cssflexdirection of Flexible elastic Box Model

CSS flex-direction and cssflexdirection of Flexible elastic Box Model
Instance

Set the direction of the <div> elastic box element to the opposite order:

1. Div
2. {
3. Display: flex;
4. Flex-direction: row-reverse;
5. }

Browser support for copying preview results

The number in the table indicates the version number of the first browser that supports this attribute.

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

Attribute
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 attribute specifies the direction of a flexible project.

NOTE: If an element is not an element of an Elastic box object, the flex-direction attribute does not work.

Default Value:	Row
Inheritance:	No
Animations:	No. See SS3 animation attributes and CSS3 animation instances.
Version:	CSS3
JavaScript Syntax:	Object. Style. flexDirection = "column-reverse" effect Preview

 

CSS syntax flex-direction: row | row-reverse | column-reverse | initial | inherit; Attribute Value

Value	Description	Instance
Row	Default value. Flexible projects are displayed horizontally, just like a row.	Effect Preview
Row-reverse	It is the same as row, but in the opposite order.	Effect Preview
Column	Flexible projects are displayed vertically, just like a column.	Effect Preview
Column-reverse	It is the same as column, but in the opposite order.	Effect Preview
Initial	Set this property to its default value. SeeInitial.	Effect Preview
Inherit	This attribute is inherited from the parent element. SeeInherit.