flex.stylus

    1.0.2 • Public • Published

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

    Install

    npm i flex.stylus

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • qq447665722