flex的兼容写法

flex的兼容写法

/设置父元素为伸缩容器/
.flex-parent {

	display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/ 
	display: -webkit-flex; /*新版本：Chrome*/ 
	display: flex; /*标准规范：Opera 12.1, Firefox 20+*/ 
	/*设置 父元素内部的伸缩子元素项目换行规则：水平排列（row）不换行（nowrap）*/
	 -webkit-box-orient: horizontal; /*老版本：iOS 6-, Safari 3.1-6*/
	  - webkit-flex-flow: row nowrap; /*新版本：Chrome*/
	 flex-flow: row nowrap; /*标准规范：Opera 12.1, Firefox 20+*/
	  } 

/设置子元素伸缩项目的伸缩比例/

.flex-son {
-webkit-box-flex: 1; /老版本：iOS 6-, Safari 3.1-6/
-webkit-flex: 1; /新版本：Chrome/
flex: 1; /标准规范：Opera 12.1, Firefox 20+/
/此处无需设置宽度，因为flexbox会自动伸缩/
}