Package Exports
- flex.stylus
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flex.stylus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
flex
对flex+栅格系统封装
按需要使用
- standard版:标准24栅格(5+无单数)
- full版:24栅格全尺寸
- tiny版:12栅格(5+无单数)
用法如下
| 类名 | 容器 | 说明 |
|---|---|---|
| .flex | 父 | 默认 水平排列,不换行 |
| .vertical | 父 | 垂直排列 |
| .gutters-* | 父 | 子元素间隔Npx |
| .wrap | 父 | 换行 |
| .wrap-reverse | 父 | 反转 换行 |
| .start | 父 | 水平方向,左对齐 默认 |
| .end | 父 | 水平方向,右对齐 |
| .center | 父 | 水平方向,中线对齐 |
| .between | 父 | 水平方向,平均对齐,两端不留白 |
| .around | 父 | 水平方向,平均对齐,两端留白 |
| .top | 父 | 垂直方向,顶部对齐 默认 |
| .bottom | 父 | 垂直方向,底端对齐 |
| .middle | 父 | 垂直方向,中间对齐 |
| .baseline | 父 | 垂直方向,第一行文字的基线对齐 |
| .stretch | 父 | 垂直方向,如果未设置高度或设为auto，将占满整个容器的高度 |
| --- | --- | --- |
| .span-* | 子 | N单元大小 |
| .offset-* | 子 | 向右移动N单元 |
| .gutter-* | 子 | 间隔Npx |
| .order-* | 子 | 排序 |
| .fill | 子 | 弹性元素,需要配合任意span-* |
<div class="flex vertical gutter-8 wrap start bottom">
<div class="span-7 offset-1 gutter-8 order-2"></div>
<div class="span-8 order-1"></div>
<div class="span-8 order-3"></div>
</div>剩下的不想写了,自己看一下flex就会用了,这个css只写封装了一下而已
###其它
另外前端工程化可以使用import "flex.stylus",PS:npm未得闲测试