@mixin flexGapRow($size) {
  gap: $size;
  & > * {
    margin-right: $size;
  }
  & > *:last-child {
    margin-right: 0;
  }
}

@mixin flexGapColumn($size) {
  gap: $size;
  & > * {
    margin-bottom: $size;
  }
  & > *:last-child {
    margin-bottom: 0;
  }
}

/**
 * 兼容低版本浏览器的 Flex Wrap 布局 Mixin
 * 支持浏览器：自动检测 gap 支持，不支持时回退到负边距方案
 * @param {number} $row-gap - 行间距
 * @param {number} $column-gap - 列间距
 * @param {string} $direction: row - 布局方向 (row|column)
 */
@mixin flexGapWrap($row-gap, $column-gap, $direction: row) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: $direction;

  // 现代浏览器：直接使用 gap
  @supports (gap: 1px) {
    gap: $row-gap $column-gap;
  }

  // 低版本浏览器回退方案
  @supports not (gap: 1px) {
    @if $direction == row {
      // 横向布局：用负边距补偿
      margin: -$row-gap / 2 (-$column-gap / 2);

      & > * {
        margin: $row-gap / 2 $column-gap / 2;
      }
    } @else {
      // 纵向布局
      margin: (-$row-gap / 2) (-$column-gap / 2);

      & > * {
        margin: $row-gap / 2 $column-gap / 2;
      }
    }
  }
}