微信小程序之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布局属性感受下。