我从每个回答和访问博客中学到的是

横轴和主轴是什么

主轴为水平行，横轴为垂直列-为弯曲方向:行 主轴为垂直列，横轴为水平行-为弯曲方向:列

现在是align-content和align-items

Align-content是针对行，如果容器有(多于一行) align-content的属性

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Align-items用于行中的项目 对齐项的属性

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

如需更多参考，请访问flex

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

比较以下四个方框:

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

align-content

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

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

对齐项目

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

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

根据我在这里的理解:

当您使用align-item或justify-item时，您正在分别沿列轴或行轴调整网格项中的内容。

但是: 如果使用align-content或justify-content，则是沿着列轴或行轴设置网格的位置。当你在一个更大的容器中有一个网格，宽度或高度是固定的(使用px)时，就会发生这种情况。

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

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

(如果弯曲方向为列)