1.0.2 • Published 1 year ago
wang-layout v1.0.2
介绍
一个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>