微信小程序之flex布局 _微信

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

文章插图

很简单，小程序完美地支持了Flex布局，这为开发者快速敏捷地进行页面开发创造了便利条件。
微信小程序所用到的flex布局只是当今CSS3的三大主流布局之一，而这三大主流布局就是：【栅格布局、flex弹性布局、float布局】。下面，我们来PK总结下：
1、CSS3之新特性grid栅格布局：【行row和列column】都自己控制,完全基于CSS控制（未来的主流趋势，最新的浏览器才兼容）
【微信小程序之flex布局】2、float模拟栅格布局：核心控制【列】的一维布局【使用整体：目前市面上最流行的模拟栅格布局,大部分框架都是基于此】
3、flex布局：核心是控制【行的内部布局】形成的一维布局【适合局部：目前市面上最流行的局部布局，大部分框架都开始支持】
其它2种布局在这里我们就不多说了。我们来重点理解感受一下什么是flex布局。看重点：flex布局的核心是控制【行的内部布局】形成的一维布局。一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局，作为对比的是二维布局CSS Grid Layout，可以同时处理行和列上的布局。也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。