詳解Flexible彈性盒子模型之CSS flex-flow屬性

實例

讓彈性盒的元素以相反的順序顯示，且在必要的時候進行拆行：

1. display:flex;

2. flex-#flow##:row#-reverse wrap##;

 

---

# 

效果預覽瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器的版本號。 緊接在 -webkit-, -ms- 或 -moz- 後的數字為支援該前綴屬性的第一個版本。  18.0 -moz-9.0

			屬性
		flex-flow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0

6.1 -webkit-#######17.0############

---

定義和用法

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性。

flex-flow 屬性用於設定或檢索彈性盒模型物件的子元素排列方式。

flex-direction 屬性規定彈性項目的方向。

flex-wrap 屬性規定彈性項目是否拆行或拆列。

注意：如果元素不是彈性盒物件的元素，則 flex-flow 屬性不起作用。

化：#否。請參閱 SS3動畫屬性、實例。 版本：##object.style.flexFlow="column nowrap" 效果預覽

預設值：	nowrap
否	可動畫
CSS3動畫
##CSS3	#JavaScript 語法：

#########

 

---

CSS 文法

#flex-flow: flex-direction flex-wrap|initial|inherit;

屬性值

columncolumn-reverseinitial規定靈活專案的方向。 wrapwrap- reverseinitial預設值是"nowrap"。

#值	描述
	#flex-direction 可能的值： row row-reverse
inherit預設值是"row"。	flex-wrap 可能的值： nowrap
inherit	規定靈活項目是否拆行或拆列。
initial	設定該屬性為它的預設值。請參閱 initial。

inherit######從父元素繼承該屬性。請參閱 ###inherit###。 ############

以上是詳解Flexible彈性盒子模型之CSS flex-flow屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！