承香墨影
最快捷的技术进阶之路
正文共： 2637字 10图
预计阅读时间： 7分钟
Hi，大家好，我是承香墨影！
最近在用小程序，验证一些方向，开发效率确实非常快。
从零开发小程序，阅读一遍文档一定是第一步，之后你就需要考虑，如何像开发一款 App 一样，编写一个漂亮的 UI 布局。
在小程序的开发中，会使用 Flex 进行布局，它可以帮助我们快速的在小程序中进行快速的 UI 布局。
Flex 利用 css 属性来进行布局，和 Android 布局一样，有一些属性是作用在父容器上的，而另外一些属性是作用在子元素上的。
在上一篇文章中，已经将 Flex 作用在父容器上的属性讲解清楚了，还不了解的可以戳这里????「小程序的 Flex 布局（一）」。
继续接上文的内容，来继续说说 Flex 中，作用在子元素上的属性。
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 效果。
快来开始你的小程序开发之旅吧！
你对 Flex 布局，还有什么疑问，可以在留言区讨论。
今天再特别推荐一个朋友的公众号，也是技术方向，我想很多朋友应该也知道他，还没关注的推荐关注一波。
「非著名程序员」，程序猿，攻城狮们的聚集地，这里分享的不仅有开发技术，还有编程经验，产品分析，以及互联网趋势分析与观察。带你提高自己技术的同时，还能让你时时刻刻走在技术和互联网的最前沿。
「非著名程序员」，可能是东半球最好的技术分享公众号。
公众号后台回复成长『成长』，将会得到我准备的学习资料，也能回复『加群』，一起学习进步；你还能回复『提问』，向我发起提问。
「联机圆桌」????一年 50 个优质问题，上桌联机学习。
推荐阅读：
听说喜欢留言、分享的人
运气都不会太差
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
