/*flex布局*/

.flex {
  display: -webkit-box;
  display: box;
  display: flex;
}

/*主轴[水平|垂直]，默认是水平*/
.direction-v {
  -webkit-box-orient: vertical;
  box-orient: vertical;
  flex-direction: column;
}

/*两端对齐*/
.justify {
  -webkit-box-pack: justify;
  box-pack: justify;
  justify-content: space-between;
}

/*水平居中对齐*/
.h-center {
  -webkit-box-pack: center;
  box-pack: center;
  justify-content: center;
}

/*垂直居中*/
.v-center {
  -webkit-box-align: center;
  box-align: center;
  align-items: center;
}
/*底部对齐*/
.v-bottom {
  -webkit-box-align: end;
  box-align: end;
  align-items: flex-end;
}
/*垂直容器元素铺满容器高度  默认值  如果项目未设置高度或为auto，则将占满整个容器高度*/
.v-full {
  -webkit-box-align: stretch;
  box-align: stretch;
  align-items: stretch;
}

/*换行  默认不换行*/
.wrap {
  -webkit-box-lines: multiple;
  box-lines: multiple;
  flex-wrap: wrap;
}

/*多行情况由CSS控制，不需要align-content属性来控制*/