@charset "utf-8";

.flex {
	display: -webkit-box;
	/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -moz-box;
	/* 老版本语法: Firefox (buggy) */
	display: -ms-flexbox;
	/* 混合版本语法: IE 10 */
	display: -webkit-flex;
	/* 新版本语法: Chrome 21+ */
	display: flex;
	/* 新版本语法: Opera 12.1, Firefox 22+ */
}

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

/* 子元素占据剩余空间 */
.flex-1 {
	-webkit-flex: 1;
	/* Chrome */
	-ms-flex: 1;
	/* IE 10 */
	flex: 1;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-flex: 1;
	/* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;
	/* OLD - Firefox 19- */
}

/* 子元素垂直居中 */
.flex-align-center {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

/* 子元素水平居中 */
.flex-pack-center {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
	
/* 子元素左对齐 */
.flex-pack-left{
	-webkit-box-pack: start;
	-webkit-justify-content:flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

/* 子元素右对齐 */
.flex-pack-right{
	-webkit-box-pack:end;
	-webkit-justify-content:flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

/* 子元素两端对齐   元素之间的间隔都相等*/
.flex-pack-justify-between {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/* 子元素两侧间隔相等   元素之间的间隔比元素与边框的间隔大一倍*/
.flex-pack-justify-around{
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

/* 自动换行 */
.flex-warp{
	flex-wrap: wrap;
}