【小程序】Flex布局

【小程序】笔记内容声明及汇总

---

在前面的 【小程序】image组件的13种模式 中，我们使用了如下样式：

/// wxml 布局

    
    
    


/// 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 时，对齐方式是左中右。