首先，align-items用于单行中的项目。因此，对于主轴上的单行元素，align-items会将这些元素各自对齐，并从下一行的新视角开始。

现在，align-content不会干扰一行中的项，而是会干扰行本身。因此，align-content将尝试根据彼此和flex容器对齐行。

检查这个小提琴:https://jsfiddle.net/htym5zkn/8/

我已经在浏览器上检查过了。

Align-content可以更改行方向的行高或列的宽度(当它的值为拉伸时)，或者在行之间或行周围添加空格(空格之间、空格周围、flex-start和flex-end值)。

对齐-项目可以更改项目的高度或线区域内的位置。当项目没有被换行时，它们只有一行，它的区域总是被拉伸到flex-box区域(即使项目溢出)，align-content对单行没有影响。因此，它对没有被换行的项目没有影响，而只对对齐项目有影响——当所有项目都在一条线上时，项目可以改变项目的位置或拉伸它们。

但是，如果它们被自动换行，则每行内有多行和项目。如果每一行的所有项都具有相同的高度(对于行方向)，那么该行的高度将等于这些项的高度，并且更改align-items值不会看到任何影响。

因此，如果你想通过align-items来影响项目，当你的项目被包装并且具有相同的高度(对于行方向)时，首先你必须使用align-content with stretch value来扩展线条区域。

关键属性是弹性包装。当nowrap(或当十字轴上没有多余的空间)时，align-content没有作用。当换行或反向换行时，如果十字轴中有额外的空间，它总是会产生影响(不管行数如何)。

比较以下四个方框:

主要的区别是元素的高度不一样! 然后你可以看到在一行中，它们都是中心\结束\开始

Align-items将子元素垂直分布，子元素之间有空格。

Align-content将它们捆绑在一起，就像它们是一个元素一样。

(如果弯曲方向为列)

align-content

Align-content控制多行之间的交叉轴(即，如果弯曲方向是行，则为垂直方向，如果弯曲方向是列，则为水平方向)定位。

(想象一段文字是垂直展开的，向上堆叠，向下堆叠。这是在一个弯曲方向的行范例下)。

对齐项目

Align-items控制单个伸缩元素行的交叉轴。

(试想一下，如果一个段落中包含一些普通文本和一些高难度的文本，比如数学公式，每一行是如何对齐的。在这种情况下，它将是底部，顶部，或中心的每一种类型的文本在一行将对齐?)