公共样式记录

// flex适配
.flex {
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
}
/*伸缩流方向*/
.flex-direction_column {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.justify-content_flex-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.justify-content_flex-justify {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.align-items_flex-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.align-items_center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.align-items_baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}
/*伸缩性*/
.flex_auto {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  -webkit-flex: auto;
  flex: auto;
}
.flex_1 {
  width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
/*显示顺序*/
.order_2 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
.order_3 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}
// 计算
.heightcalc(@val) {
  /*Firefox*/
  height: -moz-calc(~'@{val}') !important;
  /*chrome safari*/
  height: -webkit-calc(~'@{val}') !important;
  /*Standard */
  height: calc(~'@{val}') !important;
}
.mainheight(@val) {
  height: calc(~'@{val}' - @headerheight) !important;
}
.widthcalc(@val) {
  /*Firefox*/
  width: -moz-calc(~'@{val}') !important;
  /*chrome safari*/
  width: -webkit-calc(~'@{val}') !important;
  /*Standard */
  width: calc(~'@{val}') !important;
}
.maxheightcalc(@val) {
  /*Firefox*/
  max-height: -moz-calc(~'@{val}') !important;
  /*chrome safari*/
  max-height: -webkit-calc(~'@{val}') !important;
  /*Standard */
  max-height: calc(~'@{val}') !important;
}
// 隐藏滚动条
.hide_scrollbar {
  -ms-overflow-style: none; // ie 10+
  scrollbar-width: none; // firefox
  // chrome 和Safari
  &::-webkit-scrollbar {
    height: 0 !important;
  }
}
// 单行省略
.text_line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/**
 * 多行省略（容器可以不设置高度）
 *  webpack编译时，autoprefixer会将-webkit-box-orient属性省略，必须采用黑科技克服
 *
 * @lineNum 行数
 */
.text-lines(@lineNum) {
  display: -webkit-box;
  // autoprefixer: ignore next;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lineNum;
  overflow: hidden;
  text-overflow: ellipsis;
}
// IOS滑动
.iosscroll {
  -webkit-overflow-scrolling: touch; // IOS
  &::-webkit-scrollbar {
    display: none;
  }
}