// 主轴方向 属性值
$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;

// 三层遍历，组合所有属性值
@each $direction in $directionList {
  
  // 简化一些属性值
  $dir: $direction;
  @if $direction == 'row' {
    $dir: 'x';
  }
  @if $direction == 'column' {
    $dir: 'y';
  }
  @each $justifyContent in $justifyContentList {

    // 简化一些属性值
    $JC: $justifyContent;
    @if $justifyContent == 'flex-start' {
      $JC: 'start';
    }
    @if $justifyContent == 'flex-end' {
      $JC: 'end';
    }
    @if $justifyContent == 'space-between' {
      $JC: 'between';
    }
    @if $justifyContent == 'space-around' {
      $JC: 'around';
    }
    @each $alignItems in $alignItemsList {

      // 简化一些属性值
      $AI: $alignItems;
      @if $alignItems == 'flex-start' {
        $AI: 'start';
      }
      @if $alignItems == 'flex-end' {
        $AI: 'end';
      }
      
      // 根据变量，组合为css代码
      @if $AI == 'center' {
        .flex-#{$dir}-#{$JC} {
          display: flex;
          flex-direction: $direction;
          justify-content: $justifyContent;
          align-items: center;
        }
      }
      @else {
        .flex-#{$dir}-#{$JC}-#{$AI} {
          display: flex;
          flex-direction: $direction;
          justify-content: $justifyContent;
          align-items: $alignItems;
        }
      }
    }
  }
}