专业 靠谱 的软件研发伙伴

您的位置:首页 > 新闻动态 > 微信小程序之flex布局

发布日期:2020-03-26

微信小程序之flex布局


微信小程序的页面开发和WEB一样,通过CSS对内容进行渲染布局(在微信小程序里面css的内容是写在.wxss文件中,如图)。与传统WEB不同的是,微信小程序的CSS不建议使用float模拟栅格布局和grid栅格布局。而是使用flex布局,为何呢?

小程序开发

很简单,小程序完美地支持了Flex布局,这为开发者快速敏捷地进行页面开发创造了便利条件。

微信小程序所用到的flex布局只是当今CSS3的三大主流布局之一,而这三大主流布局就是:【栅格布局、flex弹性布局、float布局】。下面,我们来PK总结下:

1、CSS3之新特性grid栅格布局:【行row和列column】都自己控制,完全基于CSS控制(未来的主流趋势,最新的浏览器才兼容)

2、float模拟栅格布局:核心控制【列】的一维布局【使用整体:目前市面上最流行的模拟栅格布局,大部分框架都是基于此】

3、flex布局:核心是控制【行的内部布局】形成的一维布局【适合局部:目前市面上最流行的局部布局,大部分框架都开始支持】

其它2种布局在这里我们就不多说了。我们来重点理解感受一下什么是flex布局。看重点:flex布局的核心是控制【行的内部布局】形成的一维布局。一维布局模型,一次只能处理一个维度(一行或者一列)上的元素布局,作为对比的是二维布局CSS Grid Layout,可以同时处理行和列上的布局。也就是说,flex布局大部分的属性都是作用于主轴的,在交叉轴上很多时候只能被动地变化。

小程序开发

注意的是flex布局大部分的属性都是作用于主轴的,所以一切都先从主轴看齐,交叉轴的元素只能被动适应,这就是flex的布局了。至于,更深入的理解flex布局,从下节开始可以通过12个flex布局属性感受下。

我们是正规实体技术开发公司,拥有专业的小程序解决方案,价格实惠,专业可靠。我们以客户需求为导向,定制商业微信小程序。以下是我们技术经理微信,可以添加进行咨询:


推荐阅读: