.flex {
  display: box;			  /* OLD - Android 4.4- */
	display: -webkit-box;	  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;		 /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;	  /* TWEENER - IE 10 */
	display: -webkit-flex;	 /* NEW - Chrome */
	display: flex;			 /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-row {
	/* 09版 */
	-webkit-box-orient: horizontal;
	/* 12版 */
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}
/* 父元素-纵向排列（主轴） */
.flex-column {
	/* 09版 */
	-webkit-box-orient: vertical;
	/* 12版 */
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}
/* 父元素-水平居中（主轴是横向才生效） */
.flex-center {
	/* 09版 */
	-webkit-box-pack: center;
	/* 12版 */
	-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	等间距排列，首尾留白
	 */
}
.flex-spaceb {
	/* 09版 */
	/*-webkit-box-pack: space-between;*/
	/* 12版 */
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
.flex-start {
	/* 09版 */
	-webkit-box-pack: start;
	/* 12版 */
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	-o-justify-content: flex-start;
	justify-content: flex-start;
}
.flex-end {
	/* 09版 */
	-webkit-box-pack: end;
	/* 12版 */
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	-o-justify-content: flex-end;
	justify-content: flex-end;
}
/* 换行 */
.flex-wrap {
	/* 09版 */
	-webkit-box-lines: multiple;
	/* 12版 */
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
/* 父元素-竖直居中（主轴是横向才生效） */
.flex-item-center {
	/* 09版 */
	-webkit-box-align: center;
	/* 12版 */
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
}
.flex-item-end {
	/* 09版 */
	-webkit-box-align: end;
	/* 12版 */
	-webkit-align-items: flex-end;
	-moz-align-items: flex-end;
	-ms-align-items: flex-end;
	-o-align-items: flex-end;
	align-items: flex-end;
}
.flex-item-stretch {
	/* 09版 */
	-webkit-box-align: stretch;
	/* 12版 */
	-webkit-align-items: stretch;
	-moz-align-items: stretch;
	-ms-align-items: stretch;
	-o-align-items: stretch;
	align-items: stretch;
}
.flex1 {
	-webkit-box-flex: 1;	  /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;		 /* OLD - Firefox 19- */
	width: 20%;			   /* For old syntax, otherwise collapses. */
	-webkit-flex: 1;		  /* Chrome */
	-ms-flex: 1;			  /* IE 10 */
	flex: 1;				  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */
.flex-1 {
	-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-ordinal-group: 1;	  /* OLD - Firefox 19- */
	-ms-flex-order: 1;			  /* TWEENER - IE 10 */
	-webkit-order: 1;			   /* NEW - Chrome */
	order: 1;					   /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 */
.flex-2 {
	-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-ordinal-group: 2;	  /* OLD - Firefox 19- */
	-ms-flex-order: 2;			  /* TWEENER - IE 10 */
	-webkit-order: 2;			   /* NEW - Chrome */
	order: 2;					   /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flexshrink {
	-webkit-flex-shrink:0;
	flex-shrink:0;
}