讓彈性盒的元素以相反的順序顯示,且在必要的時候進行拆行:
display:flex;
flex-#flow##:row#-reverse wrap##;
效果預覽瀏覽器支援
表格緊接在 -webkit-, -ms- 或 -moz- 後的數字為支援該前綴屬性的第一個版本。 | 屬性 | ||||
---|---|---|---|---|---|
|
flex-flow |
29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 | 18.0 -moz-
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性。
flex-flow 屬性用於設定或檢索彈性盒模型物件的子元素排列方式。
flex-direction 屬性規定彈性項目的方向。
flex-wrap 屬性規定彈性項目是否拆行或拆列。
注意:如果元素不是彈性盒物件的元素,則 flex-flow 屬性不起作用。
預設值: | nowrap |
---|---|
否 | 可動畫 | 化:
CSS3動畫 | 實例。|
##CSS3 | #JavaScript 語法: | ##object
#flex-flow: flex-direction flex-wrap|initial|inherit;
#值 | 描述 |
---|---|
#flex-direction 可能的值: row row-reverse | column|
inherit預設值是"row"。 | 規定靈活專案的方向。
flex-wrap 可能的值:nowrap | wrap
inherit | 預設值是"nowrap"。規定靈活項目是否拆行或拆列。 |
initial | 設定該屬性為它的預設值。請參閱 initial。 |
以上是詳解Flexible彈性盒子模型之CSS flex-flow屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!