网格布局中的盒子对齐

在此使用网格布局的示例中，在内联（主）轴上布置固定宽度轨道后，网格容器中存在额外的空间。此空间使用 justify-content 分配。在块（交叉）轴上，项目在其网格区域内的对齐方式由 align-items 控制。第一个项目通过将 align-self 设置为 center 来覆盖组上设置的 align-items 值。

作为一种二维布局方法，在使用网格布局时，我们总是有两个轴可以对齐我们的项目。我们可以使用所有盒子对齐属性来帮助我们实现这一点。

内联轴是与句子中单词在所用书写模式下的运行方向相对应的轴。因此，在英语或阿拉伯语等水平语言中，内联方向水平运行。如果您处于垂直书写模式，则内联轴将垂直运行。

要在内联轴上对齐内容，请使用以 justify- 开头的属性，justify-content、justify-items 和 justify-self。

块轴在块向下显示页面方向上与内联轴交叉——例如，英语中的段落一个接一个地垂直显示。因此，这是块维度。

要在块轴上对齐内容，请使用以 align- 开头的属性，align-content、align-items 和 align-self。

• justify-self
• align-self
• place-self
• justify-items
• align-items
• place-items

这些属性用于控制项目在其所放置的网格区域内的对齐方式。属性align-items和justify-items应用于网格容器，并设置align-self和justify-self属性作为一组。这意味着您可以一次性设置所有网格项目的对齐方式，然后通过将align-self或justify-self属性应用于单个网格项目的规则来覆盖任何需要不同对齐方式的项目。

align-self和justify-self的初始值为stretch，因此项目将拉伸到整个网格区域。此规则的例外情况是项目具有内在的纵横比，例如图像。在这种情况下，项目将在两个维度上都对齐到start，以避免图像变形。

• justify-content
• align-content
• place-content

当存在额外的空间需要分配时，这些属性用于控制网格轨道对齐方式。当您定义的轨道的总宽度小于网格容器的总宽度时，就会出现这种情况。

• row-gap
• column-gap
• gap

网格规范最初包含属性grid-row-gap、grid-column-gap和grid-gap的定义。这些属性后来被移至盒子对齐规范中，并重命名为row-gap、column-gap和gap。这使得它们可以用于其他布局方法，在这些方法中，项目之间的间隙是有意义的。

更新后的属性尚未在所有浏览器中实现。因此，要在网格布局中使用间隙属性，您应该使用grid-row-gap、grid-column-gap和grid-gap版本以确保完全兼容性。您可以同时使用这些属性，就像使用供应商前缀一样。

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

• 横轴
• 主轴

• 网格布局中的对齐