wang-layout

介绍

一个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>