Style flexDirection 属性
示例
重新排列 <div> 元素内灵活项目的排列方向
document.getElementById("main").style.flexDirection = "column-reverse";亲自试一试 »
描述
flexDirection 属性设置或返回灵活项目的排列方向。
注意： 如果元素不是灵活项目，flexDirection 属性不起作用。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| flexDirection | 是 | 11.0 | 是 | 9.0 | 是 |
语法
返回 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 属性
