align-items和align-content之间的区别是什么?
当前回答
第一部分
对齐项目只适用于单行的盒子。假设容器内的一行中有4个盒子。然后，align-items将应用于将这些框对齐到一行中。如果flex-direction是row(默认值)，那么align-items将垂直排列框，如果它的column则水平排列框。
第二部分
继续上面的单行盒子，如果我们再增加一行4个盒子，现在有8个盒子，每行4个。这里align-content出现在画面中，如果我们对容器应用align-content，它将被应用到总共有8个盒子的两行。如果我们应用align-content:center，它将在容器中居中。在这种意义上，align-content用于排列多行灵活的盒子。
Align-items:居中，align-content: flex-start
其他回答
首先，align-items用于单行中的项目。因此，对于主轴上的单行元素，align-items会将这些元素各自对齐，并从下一行的新视角开始。
现在，align-content不会干扰一行中的项，而是会干扰行本身。因此，align-content将尝试根据彼此和flex容器对齐行。
检查这个小提琴:https://jsfiddle.net/htym5zkn/8/
第一部分
对齐项目只适用于单行的盒子。假设容器内的一行中有4个盒子。然后，align-items将应用于将这些框对齐到一行中。如果flex-direction是row(默认值)，那么align-items将垂直排列框，如果它的column则水平排列框。
第二部分
继续上面的单行盒子，如果我们再增加一行4个盒子，现在有8个盒子，每行4个。这里align-content出现在画面中，如果我们对容器应用align-content，它将被应用到总共有8个盒子的两行。如果我们应用align-content:center，它将在容器中居中。在这种意义上，align-content用于排列多行灵活的盒子。
Align-items:居中，align-content: flex-start
Align-items将子元素垂直分布，子元素之间有空格。
Align-content将它们捆绑在一起，就像它们是一个元素一样。
(如果弯曲方向为列)
主要的区别是元素的高度不一样! 然后你可以看到在一行中，它们都是中心\结束\开始
flex-box的align-items属性将伸缩容器内的项目沿交叉轴对齐，就像justify-content沿主轴对齐一样。(对于默认的flex-direction: row，交叉轴对应于垂直，主轴对应于水平。对于flex-direction:列，这两个分别交换)。
下面是align-items:center的示例:
但align-content适用于多线柔性盒子。当项目在一行中时，它不起作用。它根据值调整整个结构。下面是一个align-content的例子:
这是align-content: space-around;使用align-items:center looks:
请注意，第一行中的第三个方框和所有其他方框都在该行中垂直居中。
下面是一些代码依赖的链接:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
这是一支超级酷的笔，它可以显示并让你在flexbox中玩几乎所有的东西。
