@row-prefix: ~'@{prefix}row';
@col-prefix: ~'@{prefix}col';
@col-prefix-xs: ~'@{prefix}col-xs';
@col-prefix-sm: ~'@{prefix}col-sm';
@col-prefix-md: ~'@{prefix}col-md';
@col-prefix-lg: ~'@{prefix}col-lg';
@col-prefix-xl: ~'@{prefix}col-xl';
@grid-columns: 24;
.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{class}-@{index} {
    float: left;
    display: block;
    box-sizing: border-box;
    width: percentage((@index / @grid-columns));
  }
  .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@grid-columns, @col-prefix);
@media (min-width: 1800px) {
  .loop-grid-columns(@grid-columns, @col-prefix-xl);
}

@media (min-width: 1200px) and (max-width: 1800px) {
  .loop-grid-columns(@grid-columns, @col-prefix-lg);
}

@media (min-width: 992px) and (max-width: 1200px) {
  .loop-grid-columns(@grid-columns, @col-prefix-md);
}

@media (min-width: 768px) and (max-width: 992px) {
  .loop-grid-columns(@grid-columns, @col-prefix-sm);
}

@media (max-width: 768px) {
  .loop-grid-columns(@grid-columns, @col-prefix-xs);
}

.@{row-prefix} {
  .h-func-clearfix();
  display: block;
}

.h-row-clear {
  float: left;
  width: 100%;
}

.@{row-prefix}-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;
  }
  &-row-reverse {
    flex-direction: row-reverse;
  }
  &-column {
    flex-direction: column;
  }
  &-column-reverse {
    flex-direction: column-reverse;
  }
}