Style flexDirection 属性

定义和用法

flexDirection 属性设置或返回弹性项的方向。

注释：如果元素不是弹性项，则 flexDirection 属性无效。

另请参阅：

CSS 参考flex-direction

实例

重新排列 <div> 元素内弹性项的方向：

document.getElementById("main").style.flexDirection = "column-reverse";

亲自试一试

语法

返回 flexDirection 属性：

object.style.flexDirection

设置 flexDirection 属性：

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

属性值

值 描述
row 默认值。弹性项目水平显示，作为一行。
row-reverse 与 row 相同，但顺序相反。
column 弹性项目垂直显示，作为一列。
column-reverse 与 column 相同，但顺序相反。
initial 将此属性设置为其默认值。请参阅 initial.
inherit 从其父元素继承此属性。请参阅 inherit.

技术细节

默认值： row
返回值： 字符串，表示元素的 flex-direction.
CSS 版本： CSS3

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 11.0 支持 9.0 支持

相关页面

HTML DOM STYLE 参考flex

HTML DOM STYLE 参考flexBasis

HTML DOM STYLE 参考flexFlow

HTML DOM STYLE 参考flexGrow

HTML DOM STYLE 参考flexShrink

HTML DOM STYLE 参考flexWrap