HTML DOM Style flexDirection 属性

最后更新于：2022-03-27 00:00:22

Style flexDirection 属性

HTML DOM Style flexDirection 属性 Style 对象

实例

重新排列 <div> 元素内灵活项目的方向：

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

尝试一下 »

定义和用法

flexDirection 属性设置或返回灵活项目的方向。

注意：如果元素不是灵活的项目，则 flexDirection 属性不起作用。

浏览器支持

Internet Explorer
Firefox
Opera
Google Chrome
Safari

Firefox、Opera 和 Chrome 支持 flexDirection 属性。

语法

返回 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

相关文章

CSS 参考手册：flex-direction 属性

HTML DOM STYLE 参考手册：flex 属性

HTML DOM STYLE 参考手册：flexBasis 属性

HTML DOM STYLE 参考手册：flexFlow 属性

HTML DOM STYLE 参考手册：flexGrow 属性

HTML DOM STYLE 参考手册：flexShrink 属性

HTML DOM STYLE 参考手册：flexWrap 属性

HTML DOM Style flexDirection 属性 Style 对象