如今前端开发，使用 flex 进行布局已经非常普遍了。就我本身举例，除了特别的定位， 不论整体还是细节的布局，基本上都使用 flex 来实现，不仅高效而且简洁 。 但是 使用flex布局，重复的场景非常多 ，都是常用的几个属性和属性值：

饱受折磨之后，于是想到可以开始 使用类名封装样式集 ，类似于 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;
第一项flex，为类名固定前缀；
第二项表示主轴的方向，即justify-content：
并且把常用的row、column简化为x、y
第三项表示主轴的对齐方式，即justify-content：
并且把flex-start, flex-end, space-between, space-between简化为start、end、between、between
第四项表示交叉轴的对齐方式，即justify-content：
并且把flex-start, flex-end简化为start、end
并且第四项可以省略，默认为center
使用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;
懒人提效系列：
面对重复的代码、逻辑，如何提高开发效率
element-ui 弹窗组件封装 极简方案
业务常量的简洁使用方案：消除恶心的find与魔法值
  
分类：
 前端
 
标签：
 
SCSS
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

        前端程序猿 @ bytedancer