问align-content和align-items之间的区别是什么？

EN

flex-box的align-items属性将flex容器中的项沿着横轴对齐，就像justify-content沿着主轴所做的那样。(对于默认flex-direction: row，横轴对应于垂直，主轴对应于水平。在flex-direction: column中，这两个分别互换)。

下面是align-items:center外观的一个示例：

​

​

但是align-content适用于多行可弯曲的盒子。当项目在单行中时，它不起作用。它根据其值对齐整个结构。下面是align-content: space-around;的一个例子：

​

下面是带有align-items:center的align-content: space-around;的外观：

​

注意，第三个框和第一行中的所有其他框都更改为在该行中垂直居中。

下面是一些可以使用的代码链接：

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Here's是一支超级酷的钢笔，它可以显示并让你玩flexbox中的几乎所有东西。

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

当值为stretch时，align-content可以更改行的高度或列的宽度，或者在space-between、space-around、flex-start、flex-end values的行之间或行周围添加空格。

align-items可以更改项目在行区域内的高度或位置。当项目没有被包装时，它们只有一行，它的区域总是延伸到弹性框区域(即使项目溢出)，align-content对单行没有影响。因此，它对未换行的项目没有影响，并且当所有项目都在一行上时，只有align-items可以更改项目的位置或拉伸它们。

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

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

主要的区别是元素的高度不同！然后，您可以看到在行中，它们都是center\end\start