align-items和align-content的区别

原文链接：https://blog.csdn.net/cc18868876837/article/details/88138057

在用 flex布局时，发现有两个属性功能好像有点类似： align-items和 align-content，乍看之下，它们都是用于定义flex容器中元素在交叉轴（主轴为 flex-deriction定义的方向，默认为row，那么交叉轴跟主轴垂直即为column，反之它们互调，flex基本的概念如下图所示）上的对齐方式，那么它们之间有什么区别呢？

本文通过实例代码来对此展开研究（flex-direction默认为水平方向，环境为google浏览器：版本 72），主要分为三部分：
① 翻译stack overflow的好的回答。
② 自己代码实例展示差别。
③ 总结。
注：本文只限属性取值为center的情况，其他属性值请自己尝试。

stack overflow上的回答（翻译）

详见问题：https://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content

• justfiy-content属性可应用于所有的flex容器，它的作用是设置flex子项（flex
  items）在主轴上的对齐方式。不同取值的效果如下所示：

• align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。不同取值的效果如下所示：
  
• align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。不同取值的效果如下所示：
  

总结

结论：从上表可知，对于align-items和align-content的区别，我们只需要记住以下两点，

align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。

align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：
①子项多行且flex容器高度固定
②子项单行，flex容器高度固定且设置了flex-wrap:wrap;

这里有个flex布局的小教程，感兴趣的同学可以玩玩：http://flexboxfroggy.com/

注：这里的高度固定的意思实际上是让flex容器在交叉轴上有多余的空间。