介绍

一个flex布局css类库，用于简化项目flex布局代码书写量

安装

npm i easy-layout -S

使用

在项目 main.js 文件引入，就可以全局使用了

import "easy-layout"

布局name

| cssName | 对应样式 | 效果 | | ----------- | ------------------------------------------------------------ | ---- | | fx | display: flex; | | | fx_fdc | display: flex;flex-direction: column; | | | fx_ac | display: flex; align-items: center; | | | fx_afs | display: flex;align-items: flex-start; | | | fx_afe | display: flex; align-items: flex-end; | | | fx_jc | display: flex; justify-content: center; | | | fx_jsb | display: flex; justify-content: space-between; | | | fx_jfs | display: flex; justify-content: flex-start; | | | fx_jfe | display: flex; justify-content: flex-end; | | | fx_jsa | display: flex; justify-content: space-around; | | | fx_jsb_ac | display: flex; justify-content: space-between; align-items: center; | | | fx_jc_ac | display: flex; justify-content: center; align-items: center; | | | fx_fdc_jcsb | display: flex;flex-direction: column;justify-content: space-between; | | | fx_1 | flex: 1; | | | fx_fs0 | flex-shrink: 0; | | | | | | | | | | | | | | | | | |

使用demo

<div class="test_box fx_jc_ac">
     <span>只需要添加 fx_jc_ac 类名，即可快速实现flex布局</span>
</div>