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 布局的设定中，子元素有 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 属性