vue 自用 预定义样式

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

.flex-row {
  display           : -webkit-box;
  display           : -webkit-flex;
  display           : flex;
  -webkit-box-orient: horizontal;
  flex-direction    : row;
}

.flex-col {
  display           : -webkit-box;
  display           : -webkit-flex;
  display           : flex;
  -webkit-box-orient: vertical;
  flex-direction    : column;
}

.flex-grow-0 {
  min-width        : 0;
  -webkit-box-flex : 0;
  -ms-flex-positive: 0;
  flex-grow        : 0;
  -ms-flex-negative: 0;
  flex-shrink      : 0;
}

.flex-grow-1 {
  min-width        : 0;
  -webkit-box-flex : 1;
  -ms-flex-positive: 1;
  flex-grow        : 1;
  -ms-flex-negative: 1;
  flex-shrink      : 1;
}

.flex-x-center {
  display         : -webkit-box;
  display         : -webkit-flex;
  display         : flex;
  -webkit-box-pack: center;
  -ms-flex-pack   : center;
  justify-content : center;
}

.flex-y-center {
  display           : -webkit-box;
  display           : -webkit-flex;
  display           : flex;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  -ms-grid-row-align: center;
  align-items       : center;
}

.flex-y-bottom {
  display           : -webkit-box;
  display           : -webkit-flex;
  display           : flex;
  -webkit-box-align : end;
  -ms-flex-align    : end;
  -ms-grid-row-align: flex-end;
  align-items       : flex-end;
}

.flex-x-between {
  justify-content: space-between;
}

.flex-x-around {
  justify-content: space-around;
}

.flex-y-start {
  align-items: flex-start;
}

.flex-x-end {
  justify-content: flex-end;
}

.flex-self-y-end {
  align-self: flex-end;
}

.flex-self-x-end {
  /* justify-self: end; */
  margin-left: auto;
}


.w100 {
   100%;
}

.h100 {
  height: 100%;
}

/* 外距 */

.mt20 {
  margin-top: 20px;
}
.mt15 {
  margin-top: 15px;
}
.mt10 {
  margin-top: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr15 {
  margin-right: 15px;
}
.mr10 {
  margin-right: 10px;
}
.md20 {
  margin-down: 20px;
}
.md15 {
  margin-down: 15px;
}
.md10 {
  margin-down: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml15 {
  margin-left: 15px;
}
.ml10 {
  margin-left: 10px;
}

/* 内距 */

.pt20 {
  padding-top: 20px;
}
.pt15 {
  padding-top: 15px;
}
.pt10 {
  padding-top: 10px;
}
.pr20 {
  padding-right: 20px;
}
.pr15 {
  padding-right: 15px;
}
.pr10 {
  padding-right: 10px;
}
.pd20 {
  padding-down: 20px;
}
.pd15 {
  padding-down: 15px;
}
.pd10 {
  padding-down: 10px;
}
.pl20 {
  padding-left: 20px;
}
.pl15 {
  padding-left: 15px;
}
.pl10 {
  padding-left: 10px;
}


.row2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.row8 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}