小程序笔记—一文弄懂align-items与align-content的区别（实操）

摘要

flex布局是小程序的主流布局之一，在写布局的时候总是无法避免align-items与align-content这两个属性，除了知道它们是控制交叉轴的对齐方式，但究竟什么时候用哪个，只能这个不行，就换那个，今天就来搞明白他们的异同。

要点

1、交叉轴是水平方向还是垂直方向？

交叉轴是相对于主轴来说的，主轴就是flex-direction中设置的方向。
若flex-direction：row，则主轴方向为水平方向、交叉轴方向为垂直方向；
若flex-direction：column，则主轴方向为垂直方向，交叉轴方向为水平方向。

2、align-items与align-content之间的相同之处？

a.都是弹性容器的属性来控制弹性项目
b.都是控制交叉轴（即弹性容器内垂直方向，水平方向由justify-content控制）的对齐方式

3、align-items与align-content之间的不同之处？

很多地方都说单行用align-items，多行用align-content，但是笔者认为不准确，且很容易带来误解。因为这只是针对flex-direction：row来说的。
现详细分析：
以flex-direction：row为例，首先需要知道要让flex布局换行需要设置flex-wrap属性，其默认值为nowrap，意思是弹性项目因为横向空间不够会被压缩在一行，只有设置为wrap或者wrap-reverse,才不会被压缩而换行。
换行后就变成了多行，这时候align-items就失效了，需要设置align-content才有效。
若flex-direction：column，上述的行就变成列，只有设置为wrap或者wrap-reverse,且纵向空间不够才会换列，多列的时候align-items就失效，需要设置align-content才有效。

上述分析以图为证

align-items有效，align-content无效

align-items无效，align-content有效

分析工具

路径：分析工具>wxss样式调试工具>flex弹性布局