CSS flex-direction 屬性
提示：更多“自己嘗試”的示例在下方。
定義和用法
flex-direction 屬性規定了彈性專案在 flex 容器中的佈局方向。
注意： 如果該元素不是彈性專案，則 flex-direction 屬性無效。
| 預設值 | row（行） |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.flexDirection="column-reverse" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| flex-direction | 29 | 11 | 28 | 9 | 17 |
CSS 語法
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| row（行） | 預設值。彈性專案水平顯示，作為一行 | 演示 ❯ |
| row-reverse（反向行） | 與 row 相同，但順序相反 | 演示 ❯ |
| column（列） | 彈性專案垂直顯示，作為一列 | 演示 ❯ |
| column-reverse（反向列） | 與 column 相同，但順序相反 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
使用 flex-direction 結合媒體查詢，為不同的螢幕尺寸/裝置建立不同的佈局
.flex-container {
display: flex;
flex-direction: row;
}
/* 響應式佈局 - 使其成為單列布局而不是雙列布局 */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 彈性盒子
CSS 參考：flex-flow 屬性
CSS 參考：flex-wrap 屬性
CSS 參考：flex 屬性
CSS 參考：flex-grow 屬性
CSS 參考：flex-shrink 屬性
CSS 參考：flex-basis 屬性
HTML DOM 參考：flexDirection 屬性
