公共样式记录

浅浅的花香味﹌ 2022-11-16 00:58 136阅读 0赞

// 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;
      }
    }