当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件弹性布局flex

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-03
  在设计网页时,如果一个网站要想既在pc上面正常显示也要在手机上面正常显示一般我们使用html5和css3技术就可以实现,由css、html和js封装的前端框架有名的就是bootstrap里面的“删格系统”,在做微信公众号开发或是做微信小程序开发时,也要使用类似“删格系统”的flex弹性布局,它与bootstrap的删格系统非常相似,如果您使用过bootstrap的话,再来研究这个flex布局就非常容易了,当然,如果没有学过的话学习flex也非常容易。

  使用WeUI提供的组件flex可以布局出您相要的任何布局来,对于设计小程序或公众号网页非常简单好用。

示例

示例代码:

        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
        </div>

        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
        </div>

        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
        </div>

        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
        </div>
        
        <div class="weui-flex">
            <div><div class="placeholder">weui</div></div>
            <div class="weui-flex__item"><div class="placeholder">weui</div></div>
            <div><div class="placeholder">weui</div></div>
        </div>


flex组件使用方法:

  在一个布局里面最外层使用一个div,在这个div里面使用类.weui-flex,然后,在这个类嵌套另一个div ,在这个div里面使用类weui-flex__item,然后,再在这个div里面嵌套另一个用来放内容的div,在这个div里面定义的样式是类.placeholder。

  这就是一个完整的flex布局,如果要在网页的一行显示多个列,只需要在最外层的div里面嵌套多个div即可。

  如果在最外层的div里面嵌套多个div,但是,其中一个或几个只使用flex组件的话,其它的div不要使用.weui-flex__item即可,如上例中的最后一行flex布局。

  如果这个使用方法不好理解的话,只需要把上面的这个例子看明白,那么,flex布局就就使用了。

源码分析:

  其实,flex是css3里面的弹性布局,如果会css3的话,那么,下面这两个类的定义就非常容易了。

.weui-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
 
.weui-flex__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}