align-content和align-items有什么区别？

根据我从这里了解到的：

when you use align-item or justify-item, you are adjusting "the content inside a grid item along the column axis or row axis respectively.

But: if you use align-content or justify-content, you are setting the position a grid along the column axis or the row axis. it occurs when you have a grid in a bigger container and width or height are inflexible (using px).

主要区别在于元素的高度不同时！然后您可以看到它们在行中如何居中\结束\开始

对齐内容

align-content控制横轴（即垂直方向，如果flex-direction是row，和水平如果flex-direction是column）的定位的多个线相对于彼此。

（段落的思考线垂直散开，朝上堆叠，朝下堆叠。这是flex-direction在行范式下）。

对齐项目

align-items 控制柔性元素的单个线的横轴。

（如果段落中的某行包含一些常规文本和一些较高的文本（如数学方程式，请考虑如何对齐）。在这种情况下，它将是一行中每种文本的底部，顶部还是中心对齐？）

好吧，我已经在浏览器中检查了它们。

align-content可以改变一个线对行方向或宽度高度为列时，它的值是拉伸，或添加之间或者周围的线空的空间space-between，space-around，flex-start，flex-end values。

align-items可以更改项目在行区域内的高度或位置。当没有包装物品时，它们只有一行，该行的区域始终被拉伸到伸缩框区域（即使物品溢出），并且align-content对一行没有影响。因此，它对未包装的物品没有影响，并且align-items当所有物品都在同一行上时，只能更改物品的位置或拉伸它们。

但是，如果将它们包装起来，则每行中都有多行和多个项目。并且，如果每行的所有项目都具有相同的高度（对于行方向），则该行的高度将等于这些项目的高度，并且更改align-items值不会产生任何影响。

因此，如果要影响align-items包裹物品的时间并且包裹物品具有相同的高度（对于行方向），则必须先使用align-contentStretch值才能扩大线条区域。

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

现在，align-content它不会干扰一行中的项目，而是会干扰rows本身。因此，align-content将尝试使行相对于彼此对齐并弯曲容器。

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

我发现示例http://flexboxfroggy.com/非常有用。

这将花费您10-20分钟，在21级时，您会找到问题的答案。它提到：

align-content确定行之间的间距，而align-items 确定项目在容器中如何整体对齐。如果只有一行，则align-content无效

align-itemsflex-box 的属性就像justify-content沿着主轴一样，沿横轴对齐flex容器内的项目。（默认情况下flex-direction: row，交叉轴对应于垂直，主轴对应于水平。flex-direction: column这两个分别互换）。

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

但align-content适用于多线柔性盒。当项目在一行中时，它无效。它根据其值对齐整个结构。这是一个示例align-content: space-around;：

这里是如何align-content: space-around;与align-items:center外观：

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

以下是一些可使用的Codepen链接：

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

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

这是一支超酷的笔，可以显示并让您使用flexbox中的几乎所有内容。