使用LESS将flex布局转class类名实现

对flex布局进行类名封装，简化使用flex布局的步骤。

 这里参考了大佬的文章：使用类名，高效快捷的进行flex布局 - 掘金

@directionList: row, row-reverse, column, column-reverse;
@justifyContentList: flex-start, flex-end, center, space-between, space-around;
@alignItemsList: flex-start, flex-end, center, baseline, stretch;
.generateFlex (@dr, @JC, @AI, @dir, @jc, @ai) when (@ai=center) {
  .flex-@{dr}-@{JC} {
    display: flex;
    flex-direction: @dir;
    justify-content: @jc;
    align-items: center;
  }
}
.generateFlex (@dr, @JC, @AI, @dir, @jc, @ai) when not (@ai=center) {
  .flex-@{dr}-@{JC}-@{AI} {
    display: flex;
    flex-direction: @dir;
    justify-content: @jc;
    align-items: @ai;
  }
}
each(@directionList, .(@dir){
  @dr: if((@dir=row), x, if((@dir=column), y, @dir));
  each(@justifyContentList, .(@jc){
    @JC: if((@jc=flex-start), start, if((@jc=flex-end), end, if((@jc=space-between), between, if((@jc=space-around), around, @jc))));
    each(@alignItemsList, .(@ai){
      @AI: if((@ai=flex-start), start, if((@ai=flex-end), end, @ai));
      .generateFlex(@dr, @JC, @AI, @dir, @jc, @ai);
    });
  });
});

编译后：

.flex-x-start-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.flex-x-start-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.flex-x-start {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.flex-x-start-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.flex-x-start-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.flex-x-end-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.flex-x-end-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.flex-x-end {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.flex-x-end-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.flex-x-end-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.flex-x-center-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-x-center-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-x-center {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-x-center-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-x-center-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-x-between-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.flex-x-between-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.flex-x-between {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.flex-x-between-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.flex-x-between-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.flex-x-around-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.flex-x-around-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.flex-x-around {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.flex-x-around-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.flex-x-around-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.flex-row-reverse-start-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}
.flex-row-reverse-start-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}
.flex-row-reverse-start {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}
.flex-row-reverse-start-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}
.flex-row-reverse-start-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}
.flex-row-reverse-end-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.flex-row-reverse-end-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.flex-row-reverse-end {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.flex-row-reverse-end-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.flex-row-reverse-end-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.flex-row-reverse-center-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}
.flex-row-reverse-center-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}
.flex-row-reverse-center {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}
.flex-row-reverse-center-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}
.flex-row-reverse-center-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}
.flex-row-reverse-between-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flex-row-reverse-between-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flex-row-reverse-between {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flex-row-reverse-between-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flex-row-reverse-between-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flex-row-reverse-around-start {
	align-items: flex-start;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
}
.flex-row-reverse-around-end {
	align-items: flex-end;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
}
.flex-row-reverse-around {
	align-items: center;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
}
.flex-row-reverse-around-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
}
.flex-row-reverse-around-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
}
.flex-y-start-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.flex-y-start-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.flex-y-start {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.flex-y-start-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.flex-y-start-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.flex-y-end-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.flex-y-end-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.flex-y-end {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.flex-y-end-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.flex-y-end-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.flex-y-center-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex-y-center-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex-y-center {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex-y-center-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex-y-center-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex-y-between-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-y-between-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-y-between {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-y-between-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-y-between-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-y-around-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.flex-y-around-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.flex-y-around {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.flex-y-around-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.flex-y-around-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.flex-column-reverse-start-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}
.flex-column-reverse-start-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}
.flex-column-reverse-start {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}
.flex-column-reverse-start-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}
.flex-column-reverse-start-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}
.flex-column-reverse-end-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.flex-column-reverse-end-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.flex-column-reverse-end {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.flex-column-reverse-end-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.flex-column-reverse-end-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
.flex-column-reverse-center-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
}
.flex-column-reverse-center-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
}
.flex-column-reverse-center {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
}
.flex-column-reverse-center-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
}
.flex-column-reverse-center-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
}
.flex-column-reverse-between-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.flex-column-reverse-between-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.flex-column-reverse-between {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.flex-column-reverse-between-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.flex-column-reverse-between-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.flex-column-reverse-around-start {
	align-items: flex-start;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}
.flex-column-reverse-around-end {
	align-items: flex-end;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}
.flex-column-reverse-around {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}
.flex-column-reverse-around-baseline {
	align-items: baseline;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}
.flex-column-reverse-around-stretch {
	align-items: stretch;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}