使用類名，高效快捷的進行flex佈局

背景

如今前端開發，使用flex進行佈局已經非常普遍了。就我本身舉例，除了特別的定位，不論整體還是細節的佈局，基本上都使用flex來實現，不僅高效而且簡潔。
但是使用flex佈局，重複的場景非常多，都是常用的幾個屬性和屬性值：

1. 定義flex佈局：display: flex;
2. 定義主軸：flex-direction: row | column;
3. 定義主軸對齊方式：justify-content: flex-start | center;
4. 需要的話，再定義交叉軸對齊方式：align-items: flex-start | center;

飽受折磨之後，於是想到可以開始使用類名封裝樣式集，類似於clearfix的使用方法，想要清除浮動的話，直接給標籤加上一個類名即可：想要實現某種flex佈局，加上一個特定類名即可。

使用類名封裝flex樣式：

把flex的相關屬性值映射到類名上，如下：

類名規則：flex-主軸方向-主軸對齊方式-交叉軸對齊方式(默認center)

.flex-x-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-y-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.flex-y-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}


.flex-y-end-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

1. 第一項flex，爲類名固定前綴；
2. 第二項表示主軸的方向，即justify-content：
   • 並且把常用的row、column簡化爲x、y
3. 第三項表示主軸的對齊方式，即justify-content：
   • 並且把flex-start, flex-end, space-between, space-between簡化爲start、end、between、between
4. 第四項表示交叉軸的對齊方式，即justify-content：
   • 並且把flex-start, flex-end簡化爲start、end
   • 並且第四項可以省略，默認爲center

當然上述類名規則以及簡化規則，可以根據自己的喜好任意修改。

使用效果

當然最開始的時候，需要一個適應過程，但是養成習慣以後，大多數佈局，一個類名就搞定了，很大的提高了效率：

1. 避免了很多的沒必要的標籤類名定義：
   • 很多時候僅僅爲了定義樣式，就得爲標籤加一個類名，現在不需要了；
   • 衆所周知，起名字是一件非常苦惱、並且浪費時間的事情。
2. 避免了html、css的環境切換的時間成本：寫完類名，還要找到css文件或者style標籤的位置去寫樣式，找對應位置也是很浪費時間。

使用scss編程生成代碼

最開始使用的時候，隻手動實現了幾個類名來實現簡單的佈局，比如沒有涉及交叉軸的設置、沒有涉及column-reverse、row-reverse等不常用的屬性值。

但是在使用普及之後，其餘的一些屬性也開始涉及到，所以想到了覆蓋常用屬性的所有屬性值：主軸方向、主軸對齊方式、交叉軸對齊方式。

但是所有屬性值組合起來代碼太多了（5 * 5 * 5），所以使用scss的編程生成代碼：

// 主軸方向 屬性值
$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;
        }
      }
    }
  }
}