3.5 Flex布局
在3.3小节中，welcome.wxss文件中的.container样式使用了一个display:flex的样式。那么，什么是Flex？
Flex布局是W3C组织在2009年提出的一个新的布局方案，其宗旨是让页面的样式布局更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对Flex布局的支持并不完善，造成了很多开发者不知道有这种布局的存在或者使用非常少，我们还是习惯使用传统的position和float属性来布局。但传统的布局方式有它的缺陷，比如像垂直居中就不是那么容易实现，Flex可以很好地解决这些问题。
小程序能够非常好地支持Flex布局，并且这也是官方推荐的布局方式，我们结合代码清单3-7来学习一下Flex布局的基础知识。
Flex也称为“弹性布局”，主要作用在容器上，比如代码清单3-7中样式为.container的view组件，就是一个容器，它将页面中所有的元素都包裹起来。
我们使用display:flex将这个view变成了一个弹性盒子。设置display:flex是应用一切弹性布局属性的先决条件，如果不设置display：flex，那么后续的其他相关弹性布局属性都将无效。
接着我们使用flex-direction这个属性指定view内元素的排列方向。这个属性可能的值有4个：
• row
• column
• row-reverse
• column-reverse
要理解这4个属性，首先要了解一个Flex布局非常重要的概念：轴。
我们知道，在一个平面直角坐标系里，轴有两个方向（就是X、Y），分别是水平方向和垂直方向。一个弹性盒子，需要确定一个主轴。这个主轴到底是水平方向还是垂直方向，就由flex-direction这个属性的值来确定。如果flex-direction值为row或者row-reverse，那么主轴的方向为水平方向，相反，如果值为column或者column-reverse，那么主轴为垂直方向。选定主轴的方向后，另外一个方向的轴我们成为“交叉轴”。也就是说，主轴并不一定就是水平方向，交叉轴也并不一定就是垂直方向，主轴的方向由flex-direction的取值来决定。理解这一点尤其重要。我们来看图3-8～图3-11所示。
图3-8 flex-direction:row时的主轴方向
图3-9 flex-direction:row-reverse时主轴的方向及子元素排列
图3-10 flex-direction:column时主轴的方向及子元素排列
图3-11 flex-direction:column-reverse时主轴的方向及子元素排列
图3-8到图3-11显示了当flex-direction取不同值时，主轴方向及子元素排布的情况。注意观察每张图里3个小item的排布顺序，主轴方向不同，子元素排布的方向也不同。
• flex-direction:row时，主轴水平，方向为自左向右
• flex-direction:row-reverse时，主轴水平，但方向为自右向左? flex-direction:column时，主轴垂直，方向自上而下
• flex-direction:column-reverse时，主轴垂直，方向自下而上
讲道理不如直接看效果。我们修改一下代码清单3-7来看下4种属性的效果。将代码清单3-7里.container样式中的flex-direction的值分别替换为row、column、row-reverse、column-reverse。为了排除其他属性的干扰，我们将.container样式中的align-items:center也先注释掉。注释代码的快捷键为Ctrl+/。得到的效果如图3-12～图3-15所示。
图3-12 flex-direction值为row时三元素自左向右
图3-13 flex-direction值为row-reverse时三元素自右向左
图3-14 flex-direction值为column时三元素自上而下
图3-15 flex-direction值为column-reverse时三元素自下而上
是不是非常清楚？至于row和row-reverse这两张图中，“Hello，桔子罐头”往上偏移了一些，是因为受到welcome.wxss样式表中其他CSS属性的影响。但这3个元素的主要排布方向特征正如我们预期的一样。
根据设计图的样式，我们应该选择flex-direction：column作为我们的主轴。效果就如图3-14所显示的那样。
虽然welcome页面的3个元素已经呈现出了垂直排列，但他们还没有居中显示。.container样式中的属性align-items: center，可以让三元素水平居中。
align-items属性定义子元素在交叉轴上如何对齐。这里特别要注意，align-items定义的是“交叉轴”这个方向上子元素的对齐方式。比如，由于我们在.container样式中设置了垂直方向为主轴，那么交叉轴就是水平方向，所以align-items：center将设置三元素在水平方向上的对齐方式为居中。
当然，align-items属性值不是只有center这一种，还有其他若干种取值。本书主要讲解小程序相关知识，限于篇幅这里就不再展开赘述这些CSS的相关知识。由于Flex布局在小程序里地位相当之高，本小节权当抛砖引玉，各位读者可以自行查找资料，更详细深入的学习Flex布局。
这里推荐一个学习方法。编程里的知识点是非常细小而琐碎的，学习不同的知识应该掌握不同的方法。对于学习CSS这类知识，笔者认为较好的学习方法应该是在实践中学习，而不是像我们上学时那样先把理论知识认真的学习一遍，甚至要求全部记住，这一点是不可取的。比如Flex布局的学习，我们首先应当大致浏览一下整个Flex的知识树，知道Flex解决了什么问题，有什么特点，大致有几类属性就够了。当我们在做项目遇到布局问题时，脑海里就能意识到Flex可能可以解决这个问题。接着我们抱着试试看的心态，带着目的去查找Flex布局的相关资料，即解决了问题，又能在实践中加深对Flex布局的理解，这比单纯死记硬背效果要好很多。人脑总是对形象化的东西记忆特别深刻，所以我们应当尽量在实践中学习知识。当然，也有可能Flex不能解决问题，但你查找和尝试解决问题的这个过程本身就是很好的学习手段。