.flex {
	/*display: box;*/
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: flex;

	/* 默认水平垂直居中 */
	-webkit-box-direction: normal; /*老语法*/
  -webkit-box-orient: horizontal; /*老语法*/
  -webkit-flex-direction: row;
  flex-direction: row;
	
	-webkit-box-pack: start; /*老语法*/
  -webkit-justify-content: flex-start;
  justify-content: flex-start;

  -webkit-box-align: center; /*老语法*/
  box-align: center; /*老语法*/
  -webkit-align-items: center;
  align-items: center;
}

.flex .self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start; 
}
.flex .self-center {
  -webkit-align-self: center;
  align-self: center;
}
.flex .self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.flex .self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
}
.flex .self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}

.flex .flex-1 { flex: 1; }
.flex .flex-2 { flex: 2; }
.flex .flex-3 { flex: 3; }

.flex-row {
	-webkit-box-direction: normal; /*老语法*/
  -webkit-box-orient: horizontal; /*老语法*/
  -webkit-flex-direction: row;
  flex-direction: row; 
}

.flex-row-rev {
	/* box-direction只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式*/
  -webkit-box-pack: end; /*老语法*/
  box-pack: end; /*老语法*/ 
  -webkit-box-direction: reverse; /*老语法*/
  box-direction: reverse; /*老语法*/
  -webkit-box-orient: horizontal; /*老语法*/
  box-orient: horizontal; /*老语法*/
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse; 
}

.flex-col {
	-webkit-box-direction: normal; /*老语法*/
  box-direction: normal; /*老语法*/
  -webkit-box-orient: vertical; /*老语法*/
  box-orient: vertical; /*老语法*/
  -webkit-flex-direction: column;
  flex-direction: column;
}
.flex-col-rev {
	/* box-direction只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式*/
  -webkit-box-pack: end; /*老语法*/
  -webkit-box-direction: reverse; /*老语法*/
  -webkit-box-orient: vertical; /*老语法*/
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse; 
}

.flex-wrap {
	-webkit-flex-wrap: wrap;
  flex-wrap: wrap;  /* 溢出换行 */
}
.flex-nowrap {
	-webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;  /* 溢出不换行 强制一行，元素同比缩小 */
}

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

/* 主轴 */
.flex-start {
	-webkit-box-pack: start; /*老语法*/
  -webkit-justify-content: flex-start;
  justify-content: flex-start; 
}
.flex-end {
	-webkit-box-pack: end;  /*老语法*/
  -webkit-justify-content: flex-end;
  justify-content: flex-end; 
}
.flex-center {
	-webkit-box-pack: center; /*老语法*/
  -webkit-justify-content: center;
  justify-content: center;
}
.flex-between {
	-webkit-box-pack: justify;  /*老语法*/
  -webkit-justify-content: space-between;
  justify-content: space-between; 
}
.flex-around {
	-webkit-justify-content: space-around;
  justify-content: space-around;
}
	
/* 交叉轴 */
.cross-start {
	-webkit-box-align: start; /*老语法*/
  box-align: start; /*老语法*/
  -webkit-align-items: flex-start;
  align-items: flex-start; 
}
.cross-end {
	-webkit-box-align: end; /*老语法*/
  box-align: end; /*老语法*/
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.cross-center {
	-webkit-box-align: center; /*老语法*/
  box-align: center; /*老语法*/
  -webkit-align-items: center;
  align-items: center;
}
.cross-baseline {
	-webkit-box-align: baseline; /*老语法*/
  box-align: baseline; /*老语法*/
  -webkit-align-items: baseline;
  align-items: baseline;
}
.cross-stretch {
	-webkit-box-align: stretch; /*老语法*/
  box-align: stretch; /*老语法*/
  -webkit-align-items: stretch;
  align-items: stretch;
}