align-content和align-items有什么区别？
任何人都可以显示align-items和align-content之间的区别吗？ 我很困惑。 谢谢一堆！
flex-box的align-items属性沿着横轴alignmentflex容器内的项目，就像justify-content沿着主轴一样。 （对于默认的flex-direction: row横轴对应于竖直方向，主轴对应于水平flex-direction: column这两flex-direction: column分别互换）。
以下是align-items:center的一个例子：
但align-content是多行灵活的框。 当项目在一条线中时，它不起作用。 它根据其价值alignment整个结构。 以下是align-content: space-around;的一个例子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
这是一个超酷的笔，显示和让你几乎在弹性盒中的一切玩。
那么我已经在我的浏览器上检查过了。
align-content可以改变行的行高或列的宽度，或者在空格之间或space-between ， space-around ， flex-start ， flex-end values之间添加空格。
align-items可以改变项目的高度或在线的区域内的位置。 当项目不被包装时，它们只有一行，它的区域始终伸展到弹性框区域（即使项目溢出），并且align-content对单行不起作用。 所以它对没有包装的物品没有影响，只有align-items可以改变物品的位置，或者当它们都在一条线上时拉伸它们。
但是，如果它们被包裹，则每行内都有多行和项目。 如果每一行的所有项目都具有相同的高度（对于行方向），那么该行的高度将等于这些项目的高度，并且您不会通过更改align-items值来看到任何效果。
所以如果你想通过align-items来影响项目，当你的项目被包装，并具有相同的高度（行方向），首先你必须使用align-content与拉伸值来扩大线条区域。
首先， align-items是单行中的项目。 因此，对于主轴上的单行元素， align-items会将这些项目彼此alignment，并且将从下一行的全新视angular开始。
现在， align-content不会干扰一行中的项目，而是与行本身 。 因此， align-content将尝试相对于彼此alignment行和flex容器。
检查这个小提琴： https : //jsfiddle.net/htym5zkn/8/
我发现这个例子http://flexboxfroggy.com/非常有用。;
这将需要你10-20分钟，在21级，你会发现你的问题的答案。 它提到：
align-content决定了行之间的间距， align-items决定了整个项目在容器中的排列方式。 当只有一行时， align-content不起作用
根据我从这里理解的：
当您使用align-item或justify-item时，您正在调整“分别沿列轴或行轴的栅格项目内的内容。
但是：如果您使用align-content或justify-content，则您将位置设置为沿列轴或行轴的网格。 它发生在一个更大的容器中的网格，宽度或高度不灵活（使用px）。
alignment内容
align-content控制交叉轴线（即，如果flex-direction是row则是垂直方向，如果flex-direction是row则是水平flex-direction ）定位多条线相对于彼此。
（一段文字的线条垂直分布，向上堆叠，向下堆叠，这是一个flex-direction行范例）。
alignment项
align-items控制单独一排柔性元素的横轴。
（想象一下，如果一个段落的某一行如果包含一些正常的文本和一些较高的文本（如math方程），那么它是如何alignment的，在这种情况下，它将成为每行文本的底部，顶部或中心alignment？）
主要的区别是当元素的高度不一样的时候！ 那么你可以看到，在行中，他们都是中心\结束\开始
