$row-prefix-cls: $lib-name + "-row";
$col-prefix-cls: $lib-name + "-col";

@mixin make-row($gutter: $grid-gutter-width) {
  position: relative;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  height: auto;
  zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}


@mixin float-grid-columns($class) {
  @for $i from 1 through $grid-columns {
    .#{$col-prefix-cls}-span#{$class}-#{$i} {
      float: left;
      flex: 0 0 auto;
    }
  }
}

@mixin loop-grid-columns($columns, $class) {
  @for $index from 0 through $columns {
    @if $index == 0 {
      .#{$col-prefix-cls}-span#{$class}-#{$index} {
        display: none;
      }
      .#{$col-prefix-cls}#{$class}-push-#{$index} {
        left: auto;
      }
      .#{$col-prefix-cls}#{$class}-pull-#{$index} {
        right: auto;
      }
      .#{$col-prefix-cls}#{$class}-offset-#{$index} {
        margin-left: 0;
      }
      .#{$col-prefix-cls}#{$class}-order-#{$index} {
        order: 0;
      }
    } @else {
      .#{$col-prefix-cls}-span#{$class}-#{$index} {
        display: block;
        width: percentage(($index / $grid-columns));
      }
      .#{$col-prefix-cls}#{$class}-push-#{$index} {
        left: percentage(($index / $grid-columns));
      }
      .#{$col-prefix-cls}#{$class}-pull-#{$index} {
        right: percentage(($index / $grid-columns));
      }
      .#{$col-prefix-cls}#{$class}-offset-#{$index} {
        margin-left: percentage(($index / $grid-columns));
      }
      .#{$col-prefix-cls}#{$class}-order-#{$index} {
        order: $index;
      }
    }
  }
}

@mixin make-grid($class: '') {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class);
}


.#{$row-prefix-cls} {
  @include make-row();
  display: block;

  &-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    &:before,
    &:after {
      display: flex;
    }

    // x轴原点
    &-start {
      justify-content: flex-start;
    }

    // x轴居中
    &-center {
      justify-content: center;
    }

    // x轴反方向
    &-end {
      justify-content: flex-end;
    }

    // x轴平分
    &-space-between {
      justify-content: space-between;
    }

    // x轴有间隔地平分
    &-space-around {
      justify-content: space-around;
    }

    // 顶部对齐
    &-top {
      align-items: flex-start;
    }

    // 居中对齐
    &-middle {
      align-items: center;
    }

    // 底部对齐
    &-bottom {
      align-items: flex-end;
    }
  }
;
}

.#{$col-prefix-cls} {
  position: relative;
  display: block;
}

@include make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(-sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-grid(-md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the wide desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-grid(-lg);
}


// Extra large grid
//
// Columns, offsets, pushes, and pulls for the full hd desktop device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(-xl);
}


// Extra extra large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xxl-min) {
  @include make-grid(-xxl);
}