What is CSS flex-direction property?

CSS Reference Manual
CSS Attributes

The best CSS flex-direction property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Definition and Usage,CSS Syntax,Property Value,related articles,

CSS flex-direction property

Previous: CSS flex-basis property

Next: CSS flex-flow properties

CSS Reference

Examples

Settings <div> element within the direction of the elastic element to the cartridge in reverse order:

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

Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately following the digital -webkit-, -ms- or -moz- after the first version to support the prefix 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

flex-direction attribute specifies the direction of the flexible project.

Note: If theelement is not resilient element box object, the flex-direction property does not work.

Defaults:	row
inherit:	no
Can be animated:	no. Please refer to animation (Animatable) .
version:	CSS3
JavaScript syntax:	object .style.flexDirection = "column-reverse"try

CSS Syntax

Property Value

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	尝试一下 »
row-reverse	与 row 相同，但是以相反的顺序。	尝试一下 »
column	灵活的项目将垂直显示，正如一个列一样。	尝试一下 »
column-reverse	与 column 相同，但是以相反的顺序。	尝试一下 »
initial	设置该属性为它的默认值。请参阅 initial 。	尝试一下 »
inherit	从父元素继承该属性。请参阅 inherit 。