基于微信的 flexbox布局工具

使用flexbox脚手架工具 很方便的帮助我们实现复杂布局,并且提升了页面代码的可读性.

       
                   
                   
                       
标题

                       
内容
                   
                   
                        跳转
                   
        

 

   
       
                  
                      图片文字...
                  
                  
                      图片文字...
                  
                  
                      图片文字...
                  
              
              
   

网格布局:

点击查看更多列表布局.....

####快速使用

1. 拷贝 dist/flex.wxss 或 css 到项目中 引入

2. 书写布局代码:

            <view class="fx-row">
                <view class="fx-1">1</view>
                <view class="fx-3">3</view>
            </view>
   

####兼容性问题:

1. ios ok
2. android x5内核 ok
3. 微信小程序 ok

####对齐方式 对齐方式遵循flexbox的标准

1. fx-row 为子元素横向排列
2. fx-column 为子元素竖向排列

横向排列:垂直方向的对齐策略:

类名	效果	原属性
fx-row-center	垂直居中	center
fx-row-top	顶部对齐	flex-start
fx-row-bottom	底部对齐	flex-end
fx-row-stretch	垂直拉满	stretch
fx-row-baseline	基线对齐	baseline

横向排列:水平方向的对齐策略:

类名	效果	原属性
fx-row-left	水平居左	flex-star
fx-row-middle	水平居中	center
fx-row-right	靠右	flex-end
fx-row-space-between	均匀分布	space-between
fx-row-space-around	俩头分布	baseline

竖向排列:垂直方向对齐策略 ps : 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列

类名	效果	原属性
fx-col-center	垂直居中	center
fx-col-top	顶部对齐	flex-start
fx-col-bottom	底部对齐	flex-end

竖向排列:水平方向对齐策略

类名	效果	原属性
fx-col-left	水平居左	flex-star
fx-col-right	水平居中	center
fx-col-middle	水平居右边	flex-end
fx-col-space-between	均匀分布	space-between
fx-col-space-around	俩头分布	baseline

###网格布局支持

类名	效果
col-5	5%的宽度
col-10	10%的宽度
col-15	15%的宽度

全部...

案例

1. 知乎专栏
2. 专栏源码

好东西需要你们的支持 动手点下star吧!