Grid布局中，align-items和align-content有什么区别？

Question

Grid布局中，align-items和align-content有什么区别？

csscss-grid

14

我已经阅读了Grid完全指南，但仍然对两组容器属性之间的区别感到困惑，即"justify/align-items"与"justify/align-content"。

我的困惑在于作者声称"-content"系列存在的原因是:

有时您的网格的总大小可能小于其网格容器的大小。

我认为这适用于两个系列，而不仅仅是"-content"系列。

请问有人能解释一下吗？最好使用一些图形示例来说明。

- Jinghui Niu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

让我们先澄清一下术语:

网格容器(Grid Container)

网格容器是包含网格(Grid)和网格项(Grid Items)的整体容器。它确立了一个网格格式化上下文(Grid Formatting Context)（与其他格式化上下文，如弹性或块相对）。

网格(Grid)

网格是由相互交叉的垂直和水平线组成的集合，将网格容器的空间划分为网格区域(Grid Areas)，这些区域是包含网格项的方框。

网格项(Grid Items)

网格项是网格容器中代表流动内容（即非绝对定位的内容）的方框。

以下是来自W3C的插图：

justify-content和align-content属性用于定位网格。

justify-self，justify-items，align-self和align-items属性用于定位网格项。

关于你问题中描述的问题：

我对作者声称"-content"集合会存在的原因感到困惑："有时您的网格的总大小可能小于其网格容器的大小"

好吧，你可以在插图中看到网格比网格容器小。

因此，还有剩余空间，容器能够将这个空间分配给垂直居中(align-content: center)和右对齐(justify-content: end)的网格。

多余的空间还可以使网格用像space-around，space-between和space-evenly这样的值进行间距设置。

然而，如果网格大小等于容器大小，则没有免费空间，align-content / justify-content将没有效果。

以下是规范中的更多内容：

10.3. 行轴对齐：属性 justify-self 和 justify-items

网格项可以使用网格项上的justify-self属性或网格容器上的justify-items属性来在行维度上对齐。

10.4. 列轴对齐：属性 align-self 和 align-items

网格项也可以使用网格项上的align-self属性或网格容器上的align-items属性来在块维度（垂直于行维度）上对齐。

10.5. 网格对齐：属性 justify-content 和 align-content

如果网格的外边缘与网格容器的内容边缘不相对应（例如，如果没有列是自适应大小），则网格跟踪根据网格上的justify-content和align-content属性在内容框内对齐。

容器是一种在计算机科学中广泛使用的概念，它是一种可以承载和运行应用程序的环境。容器提供了一个独立的、可重复的部署单元，其中包含了应用程序所需的所有组件和配置。与虚拟机不同的是，容器无需完整的操作系统支持，在更少的资源上运行，因此更加轻便和高效。

^{(强调添加)}