在阅读了一些答案后，他们正确地识别出，如果flex内容没有被包装，对齐内容不会产生影响。然而，他们不理解的是，当有包装内容时，对齐项仍然发挥着重要作用:

在下面的两个示例中，align-items用于将每行中的项居中，然后我们更改align-content以查看其效果。

示例1:

align-content: flex-start;

示例2:

    align-content: flex-end;

代码如下:

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

来自flexboxfroggy.com的例子:

这将花费你10-20分钟，在21级你会找到你的问题的答案。

Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时，align-content没有作用

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

现在，align-content不会干扰一行中的项，而是会干扰行本身。因此，align-content将尝试根据彼此和flex容器对齐行。

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

主要的区别是元素的高度不一样! 然后你可以看到在一行中，它们都是中心\结束\开始

在阅读了一些答案后，他们正确地识别出，如果flex内容没有被包装，对齐内容不会产生影响。然而，他们不理解的是，当有包装内容时，对齐项仍然发挥着重要作用:

在下面的两个示例中，align-items用于将每行中的项居中，然后我们更改align-content以查看其效果。

示例1:

align-content: flex-start;

示例2:

    align-content: flex-end;

代码如下:

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

第一部分

对齐项目只适用于单行的盒子。假设容器内的一行中有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