首先我们结合菜鸟教程看一下 两者到底是用在什么地方、怎么用、有哪些属性等问题。

菜鸟教程网址: CSS 教程 | 菜鸟教程

下面是我参考菜鸟教程总结的内容：

1.  align-content 属性
 定义和用法
   align-content 属性修改 flex-wrap 属性的行为。它与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。

*注意：必须有多行项目，此属性才能生效！
*提示：使用 justify-content 属性可将主轴上的项目（main-axis）水平对齐。

属性值：

stretch 默认值。行拉伸以占据剩余空间。
center 朝着弹性容器的中央对行打包。
flex-start 朝着弹性容器的开头对行打包。
flex-end 朝着弹性容器的结尾对行打包。
space-between 行均匀分布在弹性容器中。
space-around 行均匀分布在弹性容器中，两端各占一半。
initial 将此属性设置为其默认值。
inherit 从其父元素继承此属性。

2. align-item

定义和属性：

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

属性值：

stretch : 默认值。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

center：位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start :位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end:位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline： 位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

initial： 该属性为它的默认值。

inherit： 从父元素继承该属性。

接下来将两者的区别：

参考文档： https://blog.csdn.net/sinat_27088253/article/details/51532992

**align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。**

 align-content

> The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.

**align-content属性只适用于多行的  flex 容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。**
**感觉这样翻译了之后还是略微有些抽象，不过有一个重点就是多行**

 align-items

The align-items property applies to all [flex](https://so.csdn.net/so/search?q=flex&spm=1001.2101.3001.7020) containers, and sets the
default alignment of the flex items along the cross axis of each flex
line.

*align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式。*

总之、遇到多行就用align-content 没错吧哈哈哈哈

继续加油！  小白的苦日子~~~~