Flexbox兼容性语法汇总

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

主轴对齐方式：指定伸缩项目沿主轴对齐方式

规范版本	属性名称	start	center	end	justify	distribute
标准版本	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

侧轴对齐方式：指定伸缩项目沿侧轴对齐方式

规范版本	属性名称	start	center	end	baseline	stretch
标准版本	align-items	flex-start	center	flex-end	baseline	stretch
混合版本	flex-align	start	center	end	baseline	stretch
老版本	box-align	start	center	end	baseline	stretch

单个伸缩项目侧轴对齐方式

规范版本	属性名称	auto	start	center	end	baseline	stretch
标准版本	align-self	auto	flex-start	center	flex-end	baseline	stretch
混合版本	flex-item-align	auto	start	center	end	baseline	stretch
老版本	N/A

伸缩项目行对齐方式：指定伸缩项目行在侧轴的对齐方式

规范版本	属性名称	start	center	end	justify	distribute	stretch
标准版本	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>

伸缩流：指定伸缩容器主轴的伸缩流方向

规范版本	属性名称	Horizontal	Reversed horizontal	Vertical	Reversed 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 wrapping	Wrapping	Reversed 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