/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-h：盒模型水平布局
flex-1：子元素占据剩余的空间

flex-align-start：子元素垂直居左
flex-align-center：子元素垂直居中
flex-align-start：子元素垂直居右

flex-pack-start：子元素水平居上
flex-pack-center：子元素水平居中
flex-pack-end：子元素水平居下
flex-pack-justify：子元素两端对齐.....
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{
	display: box;			 
	display:-webkit-box;
	display: -moz-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}

/*flex-v：盒模型垂直布局*/
.flex-v{
	box-orient:vertical;
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
}

/*flex-h：盒模型水平布局*/
.flex-h{
	box-orient:horizontal;
	-webkit-box-orient:horizontal;
	-moz-box-orient:horizontal;
	-webkit-flex-direction:row;
	-ms-flex-direction:row;
	flex-direction:row;
}

.flex-1{
	box-flex:1;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
}

.flex-2{
	box-flex:2;
	-webkit-box-flex:2;
	-moz-box-flex:2;
	-webkit-flex:2;
	-ms-flex:2;
	flex:2;
}

.flex-3{
	box-flex:3;
	-webkit-box-flex:3;
	-moz-box-flex:3;
	-webkit-flex:3;
	-ms-flex:3;
	flex:3;
}
/*flex-align*/
.flex-align-start{
	box-align:start;
	-webkit-box-align:start;
	-moz-box-align:start;
	-webkit-align-items:flex-start;
	-ms-flex-align:start;
	align-items:flex-start;
}

.flex-align-center{
	box-align:center;
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}

.flex-align-end{
	box-align:end;
	-webkit-box-align:end;
	-moz-box-align:end;
	-webkit-align-items:flex-end;
	-ms-flex-align:end;
	align-items:flex-end;
}

/*flex-pack*/
.flex-pack-start{
	box-pack:start;
	-webkit-box-pack:start;
	-moz-box-pack:start;
	-webkit-justify-content:flex-start;
	-ms-flex-pack:start;
	justify-content:flex-start;
}

.flex-pack-center{
	box-pack:center;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
}

.flex-pack-end{
	box-pack:end;
	-webkit-box-pack:end;
	-moz-box-pack:end;
	-webkit-justify-content:flex-end;
	-ms-flex-pack:end;
	justify-content:flex-end;
}

.flex-pack-justify{
	box-pack:justify;
	-webkit-box-pack:justify;
	-moz-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
}