CSS flex-direction for Flexible Flexbox Model

Example

Set the orientation of the flexbox elements within the <div> element to the reverse order:

1. div
2. {
3. display:flex;
4. flex-direction:row-reverse;
5. }

复制

Effect preview

---

Browser support

The numbers in the table represent the version number of the first browser to support the property.

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

Attributes          

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 flex items.

Note: The flex-direction property has no effect if the element is not an element of a flexbox object.

Default: Inherit: Animatable: Version: JavaScript Syntax:

row

no

no. See  SS3 Animation Properties , CSS3 Animation Examples .

CSS3

object.style.flexDirection ="column-reverse"  effect preview

 

---

CSS syntax

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

attribute value

value description example

row	Defaults. Flexible items will be displayed horizontally as a row.	Effect preview
row-reverse	Same as row, but in reverse order.	Effect preview
column	Flexible items will be displayed vertically as a column.	Effect preview
column-reverse	Same as column, but in reverse order.	Effect preview
initial	设置该属性为它的默认值。请参阅 initial。	效果预览
inherit	从父元素继承该属性。请参阅 inherit。