【css】公共样式之flex

简介

flex作为最经典最方便的一种布局方式，不受宽高限制，使用场景也会很多，回顾下flex属性设置，发现父子元素属性设置至少3个，而且display不可继承，这就导致每次用flex都要写很多重复代码，在公共样式里封装flex，通过类名方式可以高效快捷调用，以下是.css和.scss的例子👇

• css

// 通过属性选择器实现主轴对齐方式
[class*="flex"] {
    display: flex;
    display: -webkit-flex;

    &[class*="-center"] {
        justify-content: center;
    }

    &[class*="-start"] {
        justify-content: flex-start;
    }

    &[class*="-end"] {
        justify-content: flex-end;
    }

    &[class*="-between"] {
        justify-content: space-between;
    }

    &[class*="-around"] {
        justify-content: space-around;
    }
    
    &[class*="-column"] {
        flex-direction: column;
    }
	//以此类推
}

 <div class="flex-center flex-column" style={{align-items: 'center'}}>实例1</div>

• scss

// 想到了覆盖常用属性的所有属性值,使用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;
        }
      }
    }
  }
}

 <div class="flex-x-start">实例2</div>

• 导入

// 配置文件.config.ts/.config.js中提供导入方式，以vite文件为例
export default defineConfig({
  //......
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/style/comm.scss";',
      },
    },
  },
});

或

// 在入口文件里添加，以vue为例
import { createApp } from 'vue';
import Index from './Index';

import '@/assets/style/base.scss';

createApp(Index).mount('#root');