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

/* flex-direction */
.flex-row {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}
.flex-row-reverse {
  /***兼容性写法***/
  -moz-box-direction:reverse; /* Firefox */
  -webkit-box-direction:reverse; /* Safari、Opera 以及 Chrome */
  box-direction:reverse;

  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-column {
  /***兼容性写法***/
  -moz-box-orient:vertical; /* Firefox */
  -webkit-box-orient:vertical; /* Safari、Opera 以及 Chrome */
  box-orient:vertical;

  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}
.flex-column-reverse {
  /***兼容性写法***/
  -moz-box-orient:vertical; /* Firefox */
  -webkit-box-orient:vertical; /* Safari、Opera 以及 Chrome */
  box-orient:vertical;
  -moz-box-direction:reverse; /* Firefox */
  -webkit-box-direction:reverse; /* Safari、Opera 以及 Chrome */
  box-direction:reverse;

  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

/* flex-start */
.flex-start{
  /*老版本语法*/
  -webkit-box-pack: start;
  -moz-box-pack: start;
  /*混合版本语法*/
  -ms-flex-pack: start;
  /*新版本语法*/
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}
.flex-center {
  /*老版本语法*/
  -webkit-box-pack: center;
  -moz-box-pack: center;
  /*混合版本语法*/
  -ms-flex-pack: center;
  /*新版本语法*/
  -webkit-justify-content: center; /* Safari */
  justify-content: center;   
}
.flex-end{
  /*老版本语法*/
  -webkit-box-pack: end;
  -moz-box-pack: end;
  /*混合版本语法*/
  -ms-flex-pack: end;
  /*新版本语法*/
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;  
}
.flex-space-between{
  /*老版本语法*/
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  /*混合版本语法*/
  -ms-flex-pack: justify;
  /*新版本语法*/
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}
.flex-space-around{
  /*混合版本语法*/
  -ms-flex-pack: distribute;
  /*新版本语法*/
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

/* align-items */
.align-items-start {
  /*老版本语法*/
  -webkit-box-align: start;
  -moz-box-align: start;
  /*混合版本语法*/
  -ms-flex-align: start;
  /*新版本语法*/
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

.align-items-end {
  /*老版本语法*/
  -webkit-box-align: end;
  -moz-box-align: end;
  /*混合版本语法*/
  -ms-flex-align: end;
  /*新版本语法*/
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

.align-items-center {
  /*老版本语法*/
  -webkit-box-align: center;
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center;
  /*新版本语法*/
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

.align-items-baseline {
  /*老版本语法*/
  -webkit-box-align: baseline;
  -moz-box-align: baseline;
  /*混合版本语法*/
  -ms-flex-align: baseline;
  /*新版本语法*/
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

.align-items-stretch {
  /*老版本语法*/
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  /*混合版本语法*/
  -ms-flex-align: stretch;
  /*新版本语法*/
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

.align-items-center {
  /*老版本语法*/
  -webkit-box-align: center;
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center;
  /*新版本语法*/
  -webkit-align-items: flex-center; /* Safari */
  align-items: flex-center;
}

/* align-content */
.align-content-start {
  /*混合版本语法*/
  -ms-flex-line-pack: start;
  /*新版本语法*/
  -webkit-align-content: flex-start; /* Safari */
  align-content: flex-start;
}
.align-content-end {
  /*混合版本语法*/
  -ms-flex-line-pack: end;
  /*新版本语法*/
  -webkit-align-content: flex-end; /* Safari */
  align-content: flex-end;
}
.align-content-center {
  /*混合版本语法*/
  -ms-flex-line-pack: center;
  /*新版本语法*/
  -webkit-align-content: center; /* Safari */
  align-content: center;
}
.align-content-between {
  /*混合版本语法*/
  -ms-flex-line-pack: justify;
  /*新版本语法*/
  -webkit-align-content: space-between; /* Safari */
  align-content: space-between;
}
.align-content-around {
  /*混合版本语法*/
  -ms-flex-line-pack: distribute;
  /*新版本语法*/
  -webkit-align-content: space-around; /* Safari */
  align-content: space-around;
}
.align-content-stretch {
  /*混合版本语法*/
  -ms-flex-line-pack: stretch;
  /*新版本语法*/
  -webkit-align-content: stretch; /* Safari */
  align-content: stretch;
}

/* order */
.flex-order-1{
  /*老版本语法*/
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  /*IE 10 语法*/
  -ms-flex-order: 1;
  /*新版本语法*/
  -webkit-order: 1; /* Safari */
  order: 1;
}

/* flex */
.box-flex-1{
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 10%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* flex-wrap */
.flex-wrap{
  flex-wrap: wrap;
}
.flex-no-wrap{
  flex-wrap: nowrap;
}