一、序
最近在做小程序，验证一些方向，开发效率的确很快，便是各种微信的审核有点费劲，可是总之是有办法处理的。
想要开发一款小程序，其实和咱们正常写一款 App 相似，你需求有精美的前端布局，而且一起还需求处理和前端 UI 组件的交互以及它们背面的逻辑。
最近会共享一些关于小程序的内容（不保证，想到哪里写到哪里），今天先说说接触小程序第一步：布局。
假如有前端经历的话，小程序是十分容易上手的，而对于新手，第一步当然是阅览小程序的官方文档，不过之后你马上就要面对布局的问题。
在小程序的开发框架中，会运用 Flex 排版布局，它能够协助咱们快速的在小程序中进行 UI 布局。尽管 Flex 现在现已被干流浏览器所支撑，可是 flex 在一些低版本的浏览器上还有些许兼容的问题。不过在小程序中，这就不是咱们需求考虑的了，微信现已帮咱们处理好了。
接下来我就以完好的小程序来做示例，说说 flex 布局的那些事情。话不多说，言归正传。
二、什么是 Flex
Flex 是 2009 年，W3C 提出的一种新的布局适配计划，经过 Flex 布局，能够简洁、完好、呼应式的完成各种页面布局。经过这些年的开展，现已得到了一切浏览器的支撑，基本上能够让咱们放心运用。
Flex 布局是 Flexible Box 的缩写，直译过来便是 “弹性盒子”，它也是根据 “盒子” 模型，将 UI 切割成一个一个小的盒子，来进行 UI 布局。
假如你不是在开发小程序，而是想单纯的开发移动前端，你也能够运用 Flex 布局。尽管 Flex 现已被一切浏览器支撑，可是架不住有一些老旧的浏览器，例如：IE 9，也是存在不支撑的情况的。不过咱们仅仅开发小程序，就完全不用担心这一点。
三、Flex 怎么运用
概述
Flex 的运用十分的简单，你只需求将 display 设置为 flex 就能够了。
display 除了 flex 还有一些其他可选参数，具体的你能够拜见文档。
而在新手阶段，暂时只需求重视两个参数：
- block ：指定一个块级布局，它其内的元素，总是起一个新行来显现，而微信小程序的许多视图容器组件，默许的 displa 便是 block，例如：view、scroll-view、swiper 等。
- flex：指定为 Flex 布局，它能够在盒子内显现子元素。
举个比如，看一下作用图：
在这儿，当不做特别设置的时分，默以为 display:block 的状态，其内的每一个元素，都另起一行去展现。 display:flex的话，咱们就能够自在设置其内元素的布局方法，这儿仅仅显现了 flex 默许的作用，实际上咱们还能够经过 Flex 供给的不同的特点，进行更灵活的布局。
Flex 的方向轴
想要把握 Flex 布局，你的心中时间都需求有一个方向轴的概念。
在 Flex 布局中，天然存在两根方向轴：主轴和穿插轴。穿插轴在有些地方又被称为侧轴，其实是一个概念。
在默许情况下，主轴是沿着水平方向延伸，而穿插轴则正好与主轴呈穿插状态。
可是这并非不行改动，咱们能够经过 flex-direction 特点，来改动主轴的方向，穿插轴的方向是相对于主轴存在的，当咱们改动主轴方向后，穿插轴也被一起改动。
既然 Flex 布局也是经过一些特点来操控作用的，和咱们正常写一个移动 App 是一样的，有一些特点是作用在父容器中的，有一些是作用在其内的子元素上的。
接下来咱们就来分隔解说，这些 Flex 布局的时分，你需求运用到的特点。
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 就十分好了解了。
没什么很多说的，直接上一个作用图看看。
四、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 分别设置为 1、2、3，而且每个子元素的宽度，设置为 5 rpx。
当设定了 flex-grow 之后，其内的子元素不留意占满整个父容器，就会依照 flex-grow 设定的份额，分配子元素的空间，flex-grow 的数值越小，占有的空间越小。
以这儿的体现来看，flex-grow 从小到大占有父容器的空间。
而 B 比如，咱们将子元素的宽度 width 特点，设置为 500rpx 之后，显着一行现已不够放下 3 个子元素了。这个时分 flex-grow 将不收效，将会出现等份额摆放。
此特点想要收效，flex-wrap 有必要设定为 nowrap，意思是不允许换行，一切和份额相关的特点，都需求 nowrap 加持。
期望咱们熟悉这样的举例方法，后边的比如，均会以这样的方法表明参数的设定。 width，为子元素的宽度。 特点：1、2、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 ，出现出来的作用，便是一个对父容器，在穿插轴上居中的作用，自己办理自己。
五、小结
到这儿，关于小程序中 Flex 布局的运用，基本上就算是讲清楚了。尽管前端布局有许多奇淫技巧，可是使用这两篇文章中介绍的特点，现已能够摆放出精美的 UI 作用。
更多Android进阶指南 能够具体Vx重视公众号：Android老皮 解锁 《Android十大板块文档》
1.Android车载使用开发体系学习指南（附项目实战）
2.Android Framework学习指南，助力成为体系级开发高手
3.2023最新Android中高级面试题汇总+解析，离别零offer
4.企业级Android音视频开发学习道路+项目实战（附源码）
5.Android Jetpack从入门到通晓，构建高质量UI界面
6.Flutter技能解析与实战，跨渠道首要之选
7.Kotlin从入门到实战，全方面提升架构根底
8.高级Android插件化与组件化（含实战教程和源码）
9.Android 性能优化实战+360全方面性能调优
10.Android零根底入门到通晓，高手进阶之路
敲代码不易，重视一下吧。ღ( ･ᴗ･` )
