王小美 @[email protected]

@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);
  }
}

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