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    等间距排列，首尾留白
	*/
}