【小程序】Flex布局
在前面的 【小程序】image组件的13种模式 中，我们使用了如下样式：
/// wxml 布局
<view>
<image mode="top left" src="{{image}}" />
<image mode="top" src="{{image}}" />
<image mode="top right" src="{{image}}" />
</view>
/// wxss 样式
view {
display: flex;
flex-direction: row;
align-items: center;
background-color: #000;
width: 400px;
height: 150px;
margin-top: 1px;
}
这里面使用了 display: flex; flex-direction: row;，那么，什么是 Flex？
Flex 布局是 W3C 组织在 2009 年提出的一个新的布局方案，其宗旨是让页面的样式布局更加简单，并且可以很好地支持响应式布局。它是小程序官方推荐的布局方式，但并它本身是 CSS 语法的一部分，而不是小程序所独有的技术。
Flex 也称为“弹性布局”，主要作用在容器上。比如上面的 view 组件就是一个容器，我们使用 display:flex 将这个 view 变成了一个弹性盒子。
flex-direction 属性
设置 display:flex 是应用一切弹性布局属性的先决条件，如果不设置 display:flex，那么后续的其他相关弹性布局属性都将无效。在设置好 display:flex 自后，接着我们使用 flex-direction 这个属性指定 view 内元素的排列方向，这个属性可能的值有4个：
- row （默认值）
- column
- row-reverse
- column-reverse
为了方便理解，书中引入了“轴”的概念，将 flex-direction 指定的方向定义为“主轴”，将与之垂直的方向定义为“交叉轴”。有兴趣可以自行去查阅，这里只介绍我自己的理解。
举个栗子
假设有一个 view，里面有3个 image，这3个 image 编码顺序是固定的。那么当我们一次将 view 的 flex-direction 的值修改为上面几种时，运行效果大致就是这样的：
flex-direction
这个效果和 Android 中的 LinearLayout 非常类似，只不过 LinearLayout 没有定义 reverse 的情况。对LinearLayout没有误解的童鞋，应该都看懂这个简陋的示意图，这里也就不再细说了。
align-items 属性
上个栗子中只介绍了排列方式，但 image 尺寸有大有小，它们是怎么对齐的呢？
flex 布局的对齐方式由 align-items 属性控制，书中作者引入的“轴”的感念同样延伸到了这个属性，个人觉得有点绕口，因此这里也只介绍自己的理解。如对“轴”的解释感兴趣，可自行去查阅。
现本人已知有效的属性值有如下3种：
- flex-start （默认） top/left 对齐
- center 居中对齐
- flex-end bottom/right对齐
接下来就结合实例做简要的说明。
举个栗子
这里我们以 flex-direction: row; 说事，其它情况类比即可。假设这3个 image 有如下的大小关系：
默认对齐方式
上图就是默认的对齐方式，也就是说，当排列方式是row时，默认是顶部对齐。而 center 则会让所有子组件按顺序摆放在容器中间（书中的“垂直轴”上），就是这样的：
center
没错，flex-end 的情况就是你理解的，这里就不再画图了。
一句话小结：flex-direction 的值是 row、row-reverse 时，对齐方式是上中下；值是 column、column-reverse 时，对齐方式是左中右。
