easy-flex

use flex easier

Usage no npm install needed!

<script type="module">
  import easyFlex from 'https://cdn.skypack.dev/easy-flex';
</script>

README

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布局的参考地址