微信小程序开发——如何定义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等属性将无效。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容