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

Can i use flexbox-gap

Plus: the latest Edge on Android 11 doesn’t support.

· · Web · 0 · 0 · 1
Sign in to participate in the conversation
小森林

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