微信小程序不得不知的Flex布局

微信小程序的页面开发和WEB一样，通过CSS对内容进行渲染。与传统WEB不同的是，微信小程序的CSS不建议使用float和position这种传统的布局方式。

取而代之的是可以利用Flex（弹性盒子）对页面进行布局。

我们在之前期的《CSS垂直居中的解决方案》中讨论过Flex的应用。这期我们深入讨论下Flex在微信小程序布局中的具体使用情况。

Flex布局是W3C组织在2009年提出来的一个新的布局方案，其目的是为了让页面布局更加简单，而且能很好的支持响应式布局。它并不是小程序独有的技术，但源于早期浏览器对Flex布局的支持并不完善，导至这种布局方式的使用非常少。

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

Flex主要作用在页面容器上，被称为“弹性盒子”。比如我在首页使用做为整个页面的容器。

设置 .main的CSS属性如图

注意，我们必须对容器设置display:flex; 这样容器内的元素才会遵守Flex的布局方式。

flex-direction用于指定容器内元素的排列方式，有4个可选项：

row

colum

row-reverse

colum-reverse

在Flex布局中，有一个很重要的概念就是“主轴”。这个主轴可以是水平的（row或row-reverse），也可以是垂直的(colum或colum-reverse)。

“主轴”直接决定了容器中元素的排列方式，如图

随着主轴指向的不同，页面中的元素排列方式也会不同。在我们的这个微信小程序示例中，我打算让页面自上而下排列，所以使用了

flex-direction:column;

确定主轴的方向后，我们再来讨论align-itmes的作用。align-items主要是用于确定容器中子元素在“交叉轴”方向上的排列方式。

所谓的交叉轴是指相对于主轴而言，交叉的那一个方向。

如果主轴是row或row-reverse（水平），交叉轴就是垂直的（自上而下）。

如果主轴是column或column-reverse（垂直）那交叉轴就是水平的（自左而右）。

在这个例子中，我们的主轴是column垂直的，则设置align-items:center 说明在横向上元素居中布局。最后的页面效果如图:

这里对于图标、文字及按钮部分的css代码就不赘言了，无非是设置宽高，颜色等属性。如图：