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 屬性