flex兼容性寫法

flex很早就出來了，但是由於兼容性很差，一直不火。

目前個人只在手機端中小心翼翼的使用flex，整理個模板出來，橫軸的！

模板css：

.children{
	height: 20px;
	border: 1px solid red;
	margin: 2px;
}
.parent{
	width: 1000px;
	border:1px solid green;
}

模板html：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>    
</div>

橫軸的模板flex兼容性寫法：

/* 父元素-橫向排列（主軸） */
.parent{
	display: box;
	display: -webkit-box;      
	display: -moz-box;         
	display: -ms-flexbox;      
	display: -webkit-flex;     
	display: flex;             
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}

/* 子元素-平均分欄 */
.child{
	-webkit-box-flex: 1;
	-moz-box-flex: 1;                     
	-webkit-flex: 1;          
	-ms-flex: 1;              
	flex: 1;  
}

/* 父元素-橫向換行 */
.parent{
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* 父元素-水平居中（主軸是橫向才生效） */
.parent{
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	/*其它取值如下：
	align-items     主軸原點方向對齊
	flex-end        主軸延伸方向對齊
	space-between   等間距排列，首尾不留白
	space-around    等間距排列，首尾留白
	*/
}