node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

flex.stylus

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未得闲测试