Flex gap mixins:

@use 'sass:math';
@mixin flex-gap($gap, $row: true, $reverse: false) {
  $margin: math.div($gap, 2);
  > * {
    @if $row {
      margin-left: $margin;
      margin-right: $margin;
      &:first-child {
        @if $reverse {
          margin-right: 0;
        } @else {
          margin-left: 0;
        }
      }
      &:last-child {
        @if $reverse {
          margin-left: 0;
        } @else {
          margin-right: 0;
        }
      }
    } @else {
      margin-top: $margin;
      margin-bottom: $margin;
      &:first-child {
        @if $reverse {
          margin-bottom: 0;
        } @else {
          margin-top: 0;
        }
      }
      &:last-child {
        @if $reverse {
          margin-top: 0;
        } @else {
          margin-bottom: 0;
        }
      }
    }
  }
}

Follow

Update

@use 'sass:math';
@mixin _flex-gap($gap, $row: true, $wrap: false) {
  $margin: math.div($gap, 2);
  $transform: calc(#{$margin} * -1);
  $size: calc(100% + #{$margin} * 2);
  @if $row {
    margin-left: #{$transform};
    width: #{$size};
  } @else {
    margin-top: #{$transform};
    height: #{$size};
  }
  > * {
    @if $row {
      margin-left: $margin;
      margin-right: $margin;
    } @else {
      margin-top: $margin;
      margin-bottom: $margin;
    }
  }
}

@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
  @if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
    @include _flex-gap($gap, true);
  } @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
    @include _flex-gap($gap, false);
  } @else {
    @include _flex-gap($gap, true, true);
    @include _flex-gap($gap, false, true);
  }
}
· · Web · 1 · 0 · 1

@mashiro

我自己 blog 瞎搞不但不理浏览器兼容,连属性降级兼容也不看。

Flex、grid、grid-gap 用得飞起……

@dimlau flex gap影响面还是比较大的,连最新版Edge for Android都不兼容,确实是不能忽略的,现成的那个postcss polyfill,有bug,而且和vite不兼容,所以最终折腾出这套mixin,保证兼容性 :bili_recixilie_aoligei:

gist.github.com/mashirozx/c069

Sign in to participate in the conversation
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。