@CHARSET "UTF-8";
/*====================盒子定义==========================
	flex:定义布局为盒模型
	flex1:子元素占据剩余的空间
	flex-shrink 不挤压
========================================================*/

/*====================排列方向===========================
	flex-x-positive:字元素从左到右排序
	flex-x-reverse:字元素从右到左排序
	flex-y-positive:字元素从上到下排序
	flex-y-reverse:字元素从下到上排序
========================================================*/

/*=======================换行===========================
	flex-wrap:换行
	flex-wrap-reverse:换行(第一行在下方)
	flex-no-wrap:不换行
========================================================*/

/*====================对齐方式===========================
	flex-x-start:子元素水平左对齐
	flex-x-center:子元素水平居中
	flex-x-end:子元素水平右对齐
	flex-x-between:子元素左右两端对齐
	flex-x-around:子元素左右两边的边距相等
	flex-y-start:子元素垂直顶对齐
	flex-y-center:子元素垂直居中
	flex-y-end:子元素垂直底对齐
	flex-y-between:子元素垂直两端对齐
	flex-y-around:子元素垂直两边的边距相等
	flex-y-stretch子元素垂直高度占满
	flex-y-baseline:子元素文字垂直底部对齐
========================================================*/

/*====================段落对齐方式=======================
	flex-section-start:段落顶对齐
	flex-section-center:段落居中对齐
	flex-section-end:段落底对齐
	flex-section-stretch:段落垂直高度占满
========================================================*/
.flex {
	display: -webkit-box;
	/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -moz-box; /* 老版本语法: Firefox (buggy) */
	display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: -ms-flexbox; /* 混合版本语法: IE 10 */
	display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

.flex1 {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.flex-shrink{
	flex-shrink:0;
}

.flex-x-positive {
	flex-direction: row;
	-webkit-flex-direction: row;
}

.flex-x-reverse {
	flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
}

.flex-y-positive {
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.flex-y-reverse {
	flex-direction: column-reverse;
	-webkit-flex-direction: column-reverse;
}

.flex-wrap {
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
	-webkit-flex-wrap: wrap-reverse;
}

.flex-no-wrap {
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
}

.flex-x-start {
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}

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

.flex-x-end {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}

.flex-x-around {
	justify-content: space-around;
	-webkit-justify-content: space-around;
}

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

.flex-y-start {
	align-items: flex-start;
	-webkit-align-items: flex-start;
}

.flex-y-between {
	align-content: space-between;
	-webkit-align-content: space-between;
}

.flex-y-end {
	align-items: flex-end;
	-webkit-align-items: flex-end;
}

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

.flex-y-stretch {
	align-items: stretch;
	-webkit-align-items: stretch;
}

.flex-y-baseline {
	align-items: baseline;
	-webkit-align-items: baseline;
}

.flex-y-around {
	align-content: space-around;
	-webkit-align-content: space-around;
}

.flex-section-start {
	align-content: flex-start;
	-webkit-align-content: flex-start;
}

.flex-section-end {
	align-content: flex-end;
	-webkit-align-content: flex-end;
}

.flex-section-center {
	align-content: center;
	-webkit-align-content: center;
}

.flex-section-stretch {
	align-content: stretch;
	-webkit-align-content: stretch;
}