align-item 和 align-content

align-item 和 align-content

flex 布局中的 align-items 和 align-content 属性都用于垂直对齐 flex 容器内的项目，但它们适用于不同的情况：

1. align-items: 这个属性用于在交叉轴上对齐单行内的 flex 项目。当你有一个 flex 容器，并且里面的项目不足以多行排列时，align-items 将决定这些项目如何在交叉轴上对齐。它有几个值，如 flex-start, flex-end, center, baseline, 和 stretch。

2. align-content: 这个属性则是在交叉轴上对齐多行。当你的 flex 容器有足够的空间导致内容分布在多行时，align-content 决定了这些行如何相互间隔和对齐。它的值包括 flex-start, flex-end, center, space-between, space-around, 和 stretch。

   总结一下，align-items 用于单行内部的对齐，而 align-content 用于多行之间的对齐。

如果你的 flex 容器只有一行，那么 align-content 将不会产生任何效果。

这里是四张图片，展示了 flex 布局中 align-items 和 align-content 属性的不同作用：

1. 第一张图显示了一个 flex 容器，其中只有一行项目，使用了 align-items: center，使项目在容器的垂直方向居中对齐。
2. 第二张图展示了同一个 flex 容器，但这次使用了 align-items: flex-start，将项目放置在垂直轴的起始位置。
3. 第三张图是一个包含多行项目的 flex 容器，使用了 align-content: space-around，在容器中均匀地分布了这些行。
4. 第四张图使用了 align-content: stretch，展示了如何将行拉伸以填充整个容器。