$row-prefix-cls: "#{$css-prefix}row";
$col-prefix-cls: "#{$css-prefix}col";

.#{$row-prefix-cls} {
  @include make-row();
  display: block;
  // flex-direction属性决定主轴的方向
  // flex-wrap属性如何换行。
  // justify-content属性定义了项目在主轴上的对齐方式
  &-flex {
    display: flex;
    // row（默认值）：主轴为水平方向，起点在左端。
    // // 自动换行
    flex-flow: row wrap;

    &::before,
    &::after {
      display: flex;
    }
    // justify-content属性定义了项目在主轴上的对齐方式。
    // 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;
    }
    // align-items属性定义项目在交叉轴上如何对齐。
    // 顶部对齐
    &-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 large desktop device range.

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