*{
  padding: 0;
  margin: 0;
}
.flex-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-1{
  flex: 1;
  -webkit-box-flex: 1;
}
.flex-column{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-pack-center{
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-pack-start{
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}
.flex-pack-end{
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}
.flex-align-center{
  align-items: center;
}
.flex-wrap{
  flex-wrap: wrap;
}
/*两个元素之间距离 两侧元素边都是票平分 */
.flex-space-evenly{
  -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}
/*两个元素之间距离 两侧元素靠边 */
.flex-space-between{
  -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}
/*两侧元素的空白*2==两个元素之间距离 */
.flex-space-around{
  -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
}