Notwithstanding Precautions, Misadventure
Wondering what’s next for npm?Check out our public roadmap! »

easy-flex

1.2.1 • Public • Published

easy-flex

Version

能够快捷使用flex布局的css组件

Demo & Docs

Installation

npm install easy-flex --save

or

yarn add easy-flex

CDN

https://unpkg.com/easy-flex/flex.min.css

Usage

import 'easy-flex'

Tip

使用class名:flex-h、flex-v、flex-fill、top、right、bottom、left、center,互相组合可以开发绝大多数的布局。

1、flex-h横向排列,flex-v垂直排列,子元素加flex-fill可撑开;
2、子元素排列方向使用视觉的上(top)下(bottom)左(left)右(right)作为class名;
3、横向多行布局可在父节点添加wrap类名,子节点需换行的位置使用hr标签换行,兼容性请查阅caniuse;
4、如果有其它布局要求,请使用flex布局的标准属性来设置。

具体使用方式可以直接查看example.html

配合vue

Vue下使用flex-h、flex-v、flex-fill作为标签名的话要让vue识别为自定义标签,需要加入以下代码:

Vue.config.ignoredElements = [
  "flex-h",
  "flex-v",
  "flex-fill"
];

建议全部使用class名

链接

flex兼容性

flex-wrap兼容性

flex布局的参考地址

Install

npm i easy-flex

DownloadsWeekly Downloads

0

Version

1.2.1

License

MIT

Unpacked Size

6.94 kB

Total Files

5

Last publish

Collaborators

  • avatar