scss Mixins使用flexbox进行跨浏览器支持

Posted 2021-05-18

@mixin display-flex($direction) {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: $direction;
  -webkit-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin justify-content($value) {
  -ms-flex-pack: ms-justify-content($value);
  -webkit-justify-content: $value;
  justify-content: $value;
}

@mixin flex-wrap($wrap) {
  -ms-flex-wrap: ms-flex-wrap($wrap);
  -webkit-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

@mixin flex-shrink($value) {
  -ms-flex-negative: $value;
  -webkit-flex-shrink: $value;
  flex-shrink: $value;
}

@mixin flex-grow($value) {
  -ms-flex-positive: $value;
  -webkit-flex-grow: $value;
  flex-grow: $value;
}

@mixin align-self($alignment) {
  -ms-flex-item-align: ms-align($alignment);
  -webkit-align-self: $alignment;
  align-self: $alignment;
}

@mixin align-items($alignment) {
  -ms-flex-align: ms-align($alignment);
  -webkit-align-items: $alignment;
  align-items: $alignment;
}

@mixin flex-order($value) {
  -webkit-box-ordinal-group: $value;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: $value;      /* OLD - Firefox 19- */
  -ms-flex-order: $value;              /* TWEENER - IE 10 */
  -webkit-order: $value;
  order: $value;
}

@function ms-justify-content($value) {
  @if $value == space-between {
    @return justify;
  }
  @else if $value == space-around {
    @return distribute;
  }
  @else if $value == flex-start {
    @return start;
  }
  @else if $value == initial {
    @return start;
  }
  @else if $value == flex-end {
    @return end;
  }
  @else {
    @return $value;
  }
}

@function ms-flex-wrap($wrap) {
  @if $wrap == nowrap {
    @return none;
  } @else {
    @return $wrap;
  }
}

@function ms-align($alignment) {
  @if $alignment == flex-end {
    @return end;
  } @else if $alignment == flex-start {
    @return start;
  } @else {
    @return $alignment;
  }
}