/* flex 的通用布局 */

.flex {
  display: -webkit-flex;
  display: flex;
}
/* 内部元素垂直居中 */
.flex-middle {
  -webkit-align-items: center;
  align-items: center;
}

/* 底部对齐 */
.flex-bottom{
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

/* 水平居中 */
.flex-center {
  justify-content: center;
}

.flex-right{
  justify-content: right;
}

/* 横向分布占满整个空间 */
.flex-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* 换行 */
.flex-wrap {
  flex-wrap: wrap;
}

/* 垂直布局 */
.flex-column {
  flex-direction: column;
}

/* 宽度占满 */
.flex-grow{
  flex-grow: 1;
}

.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}