来自flexboxfroggy.com的例子:

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

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

我已经在浏览器上检查过了。

Align-content可以更改行方向的行高或列的宽度(当它的值为拉伸时)，或者在行之间或行周围添加空格(空格之间、空格周围、flex-start和flex-end值)。

对齐-项目可以更改项目的高度或线区域内的位置。当项目没有被换行时，它们只有一行，它的区域总是被拉伸到flex-box区域(即使项目溢出)，align-content对单行没有影响。因此，它对没有被换行的项目没有影响，而只对对齐项目有影响——当所有项目都在一条线上时，项目可以改变项目的位置或拉伸它们。

但是，如果它们被自动换行，则每行内有多行和项目。如果每一行的所有项都具有相同的高度(对于行方向)，那么该行的高度将等于这些项的高度，并且更改align-items值不会看到任何影响。

因此，如果你想通过align-items来影响项目，当你的项目被包装并且具有相同的高度(对于行方向)时，首先你必须使用align-content with stretch value来扩展线条区域。

在阅读了一些答案后，他们正确地识别出，如果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>

关键属性是弹性包装。当nowrap(或当十字轴上没有多余的空间)时，align-content没有作用。当换行或反向换行时，如果十字轴中有额外的空间，它总是会产生影响(不管行数如何)。

比较以下四个方框:

来自flexboxfroggy.com的例子:

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

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

我从每个回答和访问博客中学到的是

横轴和主轴是什么

主轴为水平行，横轴为垂直列-为弯曲方向:行 主轴为垂直列，横轴为水平行-为弯曲方向:列

现在是align-content和align-items

Align-content是针对行，如果容器有(多于一行) align-content的属性

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Align-items用于行中的项目 对齐项的属性

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

如需更多参考，请访问flex