Flexbox版本

flexbox從第一次出現至今總共有三個語法版本，他們分別是：

• "display:box;" ?— ?2009年的老版本
• "display:flexbox;" ?— ?2011年過渡版本/混合版本
• "display:flex;" ?— ?標準版本

規范版本	IE	Opera	Firefox	Chrome	Safari
標準版本	IE 11 +	12.10+ *	20+	21+ (?-webkit-?)	7.0(-webkit-)
過渡版本	10 (?-ms-?)	?	?	?	?
老版本	?	?	3+ (?-moz-?)	<21 (?-webkit-?)	3+ (?-webkit-?)

?

開啟flexbox：讓一個元素變成伸縮容器

規范版本屬性名稱塊級伸縮容器內聯伸縮容器標準版本混合版本老版本

display	flex	inline-flex
display	flexbox	inline-flexbox
display	box	inline-box

?

?

?

?

?

主軸對齊方式：指定伸縮項目沿主軸對齊方式

規范版本屬性名稱startcenterendjustifydistribute標準版本混合版本老版本

justify-content	flex-start	center	flex-end	space-between	space-around
flex-pack	start	center	end	justify	distribute
box-pack	start	center	end	justify	N/A

?

?

?

?

?

側軸對齊方式：指定伸縮項目沿側軸對齊方式

規范版本屬性名稱startcenterendbaselinestretch標準版本混合版本老版本

align-items	flex-start	center	flex-end	baseline	stretch
flex-align	start	center	end	baseline	stretch
box-align	start	center	end	baseline	stretch

?

?

?

?

?

單個伸縮項目側軸對齊方式

規范版本屬性名稱autostartcenterendbaselinestretch標準版本混合版本老版本

align-self	auto	flex-start	center	flex-end	baseline	stretch
flex-item-align	auto	start	center	end	baseline	stretch
N/A

?

?

?

?

?

伸縮項目行對齊方式：指定伸縮項目行在側軸的對齊方式

規范版本屬性名稱startcenterendjustifydistributestretch標準版本混合版本老版本

align-content	flex-start	center	flex-end	space-between	space-around	stretch
flex-line-pack	start	center	end	justify	distribute	stretch
N/A

?

?

?

?

PS:這個只有伸縮項目有多行時才生效，這種情況只有伸縮容器設置了flex-wrap為wrap時，并且沒有足夠的空間把伸縮項目放在同一行中。這個將對每一行起作用而不是每一個伸縮項目。

顯示順序：指定伸縮項目的順序

規范版本屬性名稱屬性值標準版本混合版本老版本

order	?
flex-order	<number>
box-ordinal-group	<integer>

?

?

?

?

?

伸縮性：指定伸縮項目如何伸縮尺寸

規范版本屬性名稱屬性值標準版本混合版本老版本

flex	none??| [??<flex-grow>???<flex-shrink>?? ||??<flex-basis>?]
flex	none??| [ [??<pos-flex>???<neg-flex>?? ] ||??<preferred-size>?]
box-flex	<number>

?

?

?

?

?

伸縮流：指定伸縮容器主軸的伸縮流方向

規范版本屬性名稱HorizontalReversed horizontalVerticalReversed vertical標準版本混合版本老版本

flex-direction	row	row-reverse	column	column-reverse
flex-direction	row	row-reverse	column	column-reverse
box-orient?box-direction	horizontal?normal	horizontalreverse	verticalnormal	verticalreverse

?

?

?

?

?

換行：指定伸縮項目是否沿著側軸排列

規范版本屬性名稱No wrappingWrappingReversed wrap標準版本混合版本老版本

flex-wrap	nowrap	wrap	wrap-reverse
flex-wrap	nowrap	wrap	wrap-reverse
box-lines	single	multiple	N/A

?

?

?

?

?

wrap-reverse讓伸縮項目在側軸上進行start和end翻轉，所以，如果伸縮項目在水平排列，伸縮項目翻轉不會到一個新的線下面，他會翻轉到一個新的線上面。（簡單理解就是伸縮項目只是上下或前后翻轉順序）。

在寫本文的時候，在Firefox中并不支持flex-wrap或者box-lines屬笥。他不支持速記。

當前規范flex-flow是一個速記版本，他包括了換行flex-wrap和伸縮流flex-direction。在IE10中也支持這個版本規范。它目前還不支持Firefox瀏覽器，所以我建議避免使用它，僅使用flex-direction來指定伸縮流方向。

轉載于 http://www.tuicool.com/articles/quQVv2

轉載于:https://www.cnblogs.com/WhiteCusp/p/4257398.html

總結

以上是生活随笔為你收集整理的Flexbox兼容性语法汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。