写给 Android 开发的小程序布局指南，Flex 布局！

1、序

Hi，你们好，我是承香墨影！

最近在作小程序，验证一些方向，开发效率确实很快，就是各类微信的审核有点费劲，可是总归是有办法解决的。

想要开发一款小程序，其实和咱们正常写一款 App 相似，你须要有精美的前端布局，而且同时还须要处理和前端 UI 组件的交互以及它们背后的逻辑。

最近会分享一些关于小程序的内容（不保证，想到哪里写到哪里），今天先说说接触小程序第一步：布局。

若是有前端经验的话，小程序是很是容易上手的，而对于新手，第一步固然是阅读小程序的官方文档，不过以后你立刻就要面临布局的问题。

在小程序的开发框架中，会使用 Flex 排版布局，它能够帮助咱们快速的在小程序中进行 UI 布局。虽然说 Flex 如今已经被主流浏览器所支持，可是 flex 在一些低版本的浏览器上还有些许兼容的问题。不过在小程序中，这就不是咱们须要考虑的了，微信已经帮咱们处理好了。

接下来我就以完整的小程序来作示例，说说 flex 布局的那些事情。话很少说，言归正传。

2、什么是 Flex

Flex 是 2009 年，W3C 提出的一种新的布局适配方案，经过 Flex 布局，能够简便、完整、响应式的实现各类页面布局。通过这些年的发展，已经获得了全部浏览器的支持，基本上可让咱们放心使用。

Flex 布局是 Flexible Box 的缩写，直译过来就是 "弹性盒子"，它也是基于 "盒子" 模型，将 UI 切割成一个一个小的盒子，来进行 UI 布局。

若是你不是在开发小程序，而是想单纯的开发移动前端，你也可使用 Flex 布局。虽然 Flex 已经被全部浏览器支持，可是架不住有一些老旧的浏览器，例如：IE 9，也是存在不支持的状况的。不过咱们只是开发小程序，就彻底不用担忧这一点。

3、Flex 如何使用

3.1 概述

Flex 的使用很是的简单，你只须要将 display 设置为 flex 就能够了。

display 除了 flex 还有一些其余可选参数，具体的你能够参见文档。

而在新手阶段，暂时只须要关注两个参数：

• block ：指定一个块级布局，它其内的元素，老是起一个新行来显示，而微信小程序的不少视图容器组件，默认的 displa 就是 block，例如：view、scroll-view、swiper 等。
• flex：指定为 Flex 布局，它能够在盒子内显示子元素。

举个例子，看一下效果图：

在这里，当不作特殊设置的时候，默认为 display:block 的状态，其内的每个元素，都另起一行去展现。 display:flex 的话，咱们就能够自由设置其内元素的布局形式，这里只是显示了 flex 默认的效果，实际上咱们还能够经过 Flex 提供的不一样的属性，进行更灵活的布局。

3.2 Flex 的方向轴

想要掌握 Flex 布局，你的心中时刻都须要有一个方向轴的概念。

在 Flex 布局中，自然存在两根方向轴：主轴和交叉轴。交叉轴在有些地方又被称为侧轴，实际上是一个概念。

在默认状况下，主轴是沿着水平方向延伸，而交叉轴则正好与主轴呈交叉状态。

可是这并不是不可改变，咱们能够经过 flex-direction 属性，来改变主轴的方向，交叉轴的方向是相对于主轴存在的，当咱们改变主轴方向后，交叉轴也被同时改变。

既然 Flex 布局也是经过一些属性来控制效果的，和咱们正常写一个移动 App 是同样的，有一些属性是做用在父容器中的，有一些是做用在其内的子元素上的。

接下来咱们就来分开讲解，这些 Flex 布局的时候，你须要使用到的属性。

3.3 Flex 在父容器上的属性

在父容器上，存在的属性有：

• flex-direction：指定主轴的方向。
• flex-wrap：指定超出父容器的时候，子元素的排列样式。
• flex-flow：flex-direaction 和 flex-wrap 两个属性的组合简写形式。
• justify-content：子元素在主轴的排列方向。
• align-items：子元素在交叉轴上的排列方向。
• align-content：多根轴线的对齐方式。

这几个，除了 align-content 都是相对比较经常使用的属性。接下来咱们就一一介绍这些属性，以及在小程序中的使用效果。

1) flex-direction

前面也提到，flex 布局有两条轴，它们是交叉相对的，分为主轴和交叉轴。咱们能够经过 flex-direction 来肯定主轴的方向，同时交叉轴的方向也被肯定了。

在 flex 布局中，除了横竖两个轴以外，轴还有起始点（start）和结束点（end）的概念，加载一块儿 flex-direction 有四个属性。

• row：默认值，主轴水平方向，起始点在左边。
• row-reverse：主轴水平方向，起始点在右边。
• column：主轴垂直方向，起始点在上边。
• column-reverse：主轴垂直方向，起始点在下边。

这个虽然很是好理解，可是咱们依然在小程序中看看效果。

2）flex-wrap

flex-wrap 属性用来肯定，父容器内，当单行已经没法包容全部子元素以后，如何换行。

• nowrap：不换行，此为默认值。
• wrap：超出单行的时候，天然换行。
• wrap-reverse：超出单行的时候，沿着底部翻转方向，天然换行。

css 里就是有不少属性是带有 xxx-reverse 参数的，大多数状况下咱们也用不上，不过仍是了解一下没坏处。

虽然图片已经很清晰了，从 flex-wrap:wrap 中，能够看出 A、B、C 三个元素，实际上宽度是不一致的。

通常在单纯的介绍 flex-wrap:wrap 属性的文章，实际上是会说将多余的部分切割在父布局以外。

我也盗个图，看看别人教程里显示的效果。

实际上若是你在纯前端的环境中，使用 flex-wrap:wrap 也确实是这个效果，因此这并非错误，我理解这就是表现的差别。

可是在小程序中的表现并非这样的，它最终会根据你设置的子元素的宽度，横向的等比进行缩放，让它能够在当行内显示的下。

在这个例子中，C 块是宽度最宽的一个布局，当咱们增长 C 块的时候，看看这样极端状况下，flex-wrap:nowrap 在小程序中的表现。

能够看到，它会等比例压缩其内全部布局的宽度，这是一点差别，须要特别注意。

3）flex-flow

flex-flow 是前面两个属性 flex-direction 和 flex-wrap 的简写组合。

在 css 中，不少属性都是一些属性的组合，是存在这种写法的，中间使用空格分割就能够了。

例如：

.ele {
  flex-flow: row nowrap;
}
复制代码

这样就能够一次对两个属性进行设置，并不冲突。

4）justify-content

justify-content 能够用来设置子元素，在主轴方向上的对齐方式。

它有五个可选项：

• flex-start：默认值，左对齐。
• flex-end：右对齐。
• center：居中。
• space-between：两端对齐，元素之间等距。
• space-around：每一个子元素间隔相等，表现来看就是，元素距离边框的距离，是元素与元素距离的一半。

justify-content 基本上看描述就知道效果了，不过 space-between 和 space-around 看似很像，可是实际上也是有差别的，咱们看看最终运行的效果是最清晰的。

能够看到 space-around 是会保留左右的边距，感受就像是为每一个元素都增长了一个左右的 margin 属性，而 space-between 则只在子元素之间存在距离。

5）align-items

align-items 属性，能够定义在交叉轴上，子元素的对齐方式。

它也存在五个选择参数：

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴方向居中。
• baseline：子元素的第一个元素，内容基线对齐。
• stretch：默认参数，会在交叉轴上铺满父布局。

注意 align-items:stretch 和前面咱们的属性描述是不符合的，主要缘由是它有两个限制。

• 父容器，必须限定高度。
• 子元素，必须没有指定高度，宽仍是高，就取决于交叉轴的方向。

例如前面的代码，咱们根据这里的两个限制进行修改。

align-items 还有一点须要注意的参数是 baseline，它是根据主轴方向，第一个元素的内容为基准进行对齐，咱们把 A 块，增长一个 margin-top 再来看看效果。

能够看到，其余属性均有影响，可是 baseline 的时候，依然能够保持子元素基于内容对齐。

6）align-content

align-content 属性指定交叉轴上，元素的对齐方式，和 align-items 有点相似。通常移动端的 UI 布局，都是倾向于列表形式无限向下延伸，因此 align-content 的用处其实不大。

可是当你须要作一个单页效果，例如活动图，就能够利用上 align-content 属性了。

align-content 有六个可选的属性：

• stretch：默认值，拉伸占满交叉轴，和 align-items 限制相似。
• flex-start：与交叉轴起点对齐。
• flex-end：与交叉轴终点对齐
• center：以交叉轴居中。
• space-between：与交叉轴两端对齐，而且子元素保持间距相等。
• space-around：在交叉轴方向，子元素与边距，均保持相同距离。

其实咱们理解了 align-items ，对于 align-content 就很是好理解了。

没什么好多说的，直接上一个效果图看看。

4、Flex 的子容器属性

在 Flex 布局的设定中，子元素有 6 个属性：

• flex-grow：子元素剩余空间的拉伸比例。
• flex-shrink：子元素超出空间，反向对子元素的拉伸比例。
• flex-basis：设定子元素，在不被拉伸状况下的原始比例。
• flex：前三个属性的集合属性。
• order：设定子元素，显示的顺序。
• align-self：覆盖父容器设定的 align-items 属性，来操做子元素对交叉轴的对齐效果。

其实真正经常使用的就这么些，咱们一个一个仔细分析，保持以前的风格，都会以小程序中，真实的效果截图举例。

1. flex-grow 属性

flex-grow 属性，能够定义子元素在父元素中的伸缩比例，按照比例为子元素分配不一样的空间大小。

请注意看这里给了两个例子， A 例子中，A、B、C 三个子元素的 flex-grow 分别设置为 一、二、3，而且每一个子元素的宽度，设置为 5 rpx。

当设定了 flex-grow 以后，其内的子元素不注意占满整个父容器，就会按照 flex-grow 设定的比例，分配子元素的空间，flex-grow 的数值越小，占据的空间越小。

以这里的表现来看，flex-grow 从小到大占据父容器的空间。

而 B 例子，咱们将子元素的宽度 width 属性，设置为 500rpx 以后，明显一行已经不够放下 3 个子元素了。这个时候 flex-grow 将不生效，将会呈现等比例排列。

此属性想要生效，flex-wrap 必须设定为 nowrap，意思是不容许换行，全部和比例相关的属性，都须要 nowrap 加持。

但愿你们熟悉这样的举例方式，后面的例子，均会以这样的形式表示参数的设定。

width，为子元素的宽度。

属性：一、二、3 分别为不一样的值。

2. flex-shrink 属性

flex-shrink 定义子元素，在容器以外的空间，呈比例反向缩放。

flex-shrink 既然是指定的超出父容器以外部分的缩放比例，若是全部的子元素，并不会超出父容器，此属性将失效，如 A 例子中的效果。

而在 B 例子中，设定子元素宽度 width 为 500rpx，超出父容器的部分，将成比例反向控制子元素的大小。

在这里的表现，就是 flex-shrink 生效的状况下，数值越小，占据的空间越大。

3. flex-basis 属性

flex-basis 用于定义子元素，在不伸缩状况下的原始尺寸。

前面介绍的两个属性，不管是 flex-grow 和 flex-shrink，都会在不一样的状况下，改变子元素的缩放比例，若是咱们想设定子元素，在不出发缩放的状况下，原始的大小，就可使用 flex-basis。

从例子中能够看到，flex-basis 只在缩放不生效的时候，它才会生效。

4. flex 属性

前面介绍的三个属性，不少属性的效果实际上是互斥的，因此 Flex 布局还提供了一个组合属性 flex，用于对 flex-grow 、 flex-shrink 、 flex-basis 三个属性的缩写整合，默认值为 0 1 auto，然后两个属性是可选属性，也就是你不写后两个，等效于你只设置了 flex-grow。

为了更方便，flex 属性还提供了两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。

效果很简单，就很少说明了。

5. order 属性

order 能够控制子元素，在父布局的排列顺序，数值越小，排列越靠前。

利用 order 咱们能够不遵循 Flex 布局里，对子容器的编写顺序，都是能够经过 order 修改的。

6. align-self 属性

在上一篇文章中，咱们将了能够经过父容器的 align-items 属性，改变交叉轴上，子元素在交叉轴上的排列方向。而若是其中有子元素对这样的方向排列不满意，还能够本身经过 align-self 属性进行修改。

align-self 的默认值是 auto，表示继承父容器的 align-items 属性，若是没有父元素，等同于 stretch。

align-self 和 align-items 相似，有六个可选项。

• auto：听父容器的。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的上居中对齐。
• baseline：已第一行文字的基准对齐。
• stretch：默认，未设置高度的状况下，占满整个高度。

这里的例子中，B item 就使用 align-self 修改了对齐方式为 center ，呈现出来的效果，就是一个对父容器，在交叉轴上居中的效果，本身管理本身。

5、小结

到这里，关于小程序中 Flex 布局的使用，基本上就算是讲清楚了。虽然前端布局有不少奇淫技巧，可是利用这两篇文章中介绍的属性，已经能够排列出精美的 UI 效果。

快来开始你的小程序开发之旅吧！

---

公众号后台回复成长『成长』，将会获得我准备的学习资料，也能回复『加群』，一块儿学习进步；你还能回复『提问』，向我发起提问。

推荐阅读：

• 小程序 UI 布局指南（一）
• 程序员的密码管理之道
• 手动刷新 MediaStore，保存的图片当即出如今相册中
• 伪代码、幽默和 Google 的艺术！
• 漫画：App 防止 Fiddler 抓包小技巧！