vue-ant-patterns/lib/style/other/flex.less

vue-ant-patterns

/* 
命名规则, 三部分 className
.flex-侧轴
.flex-主轴
.flex-侧轴-主轴
*/
@align: start, center, end;
@justify: start, center, end, between;
@wrap: wrap, reverse;
@direction: row, column;

// [
//   start, start
//   start, center,
//   start, end,
//   start, between,

//   center, start,
//   center, center,
//   center, end,
//   center, between,

//   end, start,
//   end, center,
//   end, end,
//   end, between,

// ]

.flex-combination () {
  .loop(@i) when(@i < length(@align) + 1) {
    @alignName: extract(@align, @i);
    .inner(@k) when (@k < length(@justify) + 1) {
      @justName: extract(@justify, @k);
      @clsName: ~'flex-@{alignName}-@{justName}';

      .@{clsName} {
        & when (@justName = between) {
          justify-content: ~'space-@{justName}';
        }
        & when (@alignName = start), (@alignName = end) {
          align-items: ~'flex-@{alignName}';
        }
        & when (@alignName = center) {
          align-items: @alignName;
        }
        & when not (@justName = between) {
          & when not (@justName = center) {
            justify-content: ~'flex-@{justName}';
          }
          & when (@justName = center) {
            justify-content: @justName;
          }
        }
      }
      .inner(@k + 1);
    }
    .inner(1);
    .loop(@i + 1);
  }
  .loop(1);
}

.flex-property-create (@name) {
  @var-name: '@{name}';
  .loop(@i) when(@i < length(@@var-name) + 1) {
    @val: extract(@@var-name, @i);
    @cls-name: ~'flex-@{name}-@{val}';
    .@{cls-name} {
      & when(@name = justify) {
        & when (@val = between) {
          justify-content: ~'space-@{val}';
        }
        & when not (@val = between) {
          & when not (@val = center) {
            justify-content: ~'flex-@{val}';
          }
          & when (@val = center) {
            justify-content: @val;
          }
        }
      }
      & when(@name = align) {
        & when not (@val = center) {
          align-items: ~'flex-@{val}';
        }
        & when (@val = center) {
          align-items: @val;
        }
      }
    }
    .loop(@i + 1);
  }
  .loop(1);
}
.flex-combination();
.flex-property-create(align);
.flex-property-create(justify);
.flex {
  display: flex;
}
.flex-justify-between {
  justify-content: space-between;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-grow {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
}