微信小程序开发——如何定义flex布局

1、什么是flex布局，如何定义

flex布局是近年来非常流行的一种页面布局的方式，它的出现解决了流行的手机端中的许多问题，如垂直居中，因此，有人也称它为“弹性布局”。

如何定义它，定义它的方式非常简单，只要在样式中将"display"的属性值设置为"flex"就可以了，需要说明的是，该属性值作用于子集元素，也就是说，你想让某元素实现flex布局，将它的父级元素的"display"属性设为"flex"即可。

2、实例: 普通布局与flex布局的区别

需求：在微信中，分别显示三个带数字的小黄球，分别通过普通布局和flex布局来实现。

视图代码：为实现该需求，在index.wxml文件中，加入如下代码：

样式代码：在index.wxss文件中，加入如下代码

页面效果：实现的页面效果如下所示：

                                                              普通布局展示的效果

如果需要实现小黄球的flex布局，只需要将它的父级元素的"display"属性设为"flex"即可，如下面的样式代码所示：

#iframe{

      width:746rpx;

      border:solid1rpxred;

      display:flex;

}

短短的一个变化，两种效果就不同了， flex布局的效果如下图所示：

                                                              flex布局展示的效果

3、注意事项

1.在通常情况下，使用iphone6的分辨率来定义项目的宽高标准。

2. 在使用单位时，采用"rpx"，有利于手机的兼容性，1rpx=0.5px。

3. 如果一旦使用了flex布局，那么，之前的float，clear等属性将无效。

本期内容介绍到此，更加微信小程序的技术，请关注"程序布道"公众号，下期见