CSS 网格布局中的“align-items”和“align-content”有什么区别？

理解网格布局中“align-items”和“align-content”的区别

网格布局模块引入了两组属性“justify/align-items”和“justify/align-content”在对齐网格容器内的网格项和网格本身方面发挥着不同的作用。

网格术语说明

• 网格容器： 定义整体网格空间的父容器。
• 网格： 划分网格的结构化线条网格。将网格容器放入网格区域。
• 网格项目： 包含网格区域内的流入内容的框。

对齐项目与对齐项目Align-content

“align-items”和“align-content”属性，顾名思义，分别对齐网格项和网格。具体来说：

• justify-content 和 align-content 对齐网格容器内容框中的网格轨道。
• justify-self 和 justify-items 在内联维度中对齐网格项目（默认水平）。
• align-self 和 align-items 在块维度中对齐网格项目（默认为垂直）。

解决作者的声明

作者声明“ -content”属性的存在是因为“有时网格的总大小可能小于其网格容器的大小”突出显示以下内容：

• 当网格小于网格容器时，有可用空间。
• “justify-content”和“align-content”属性可以利用此空间在容器内居中或以其他方式对齐网格。
• 相反，如果网格size 等于容器大小，没有可用空间，并且这些对齐属性不起作用。

清晰插图

[来自 W3C 的插图图片显示小于其容器的网格，并使用“justify-content”和“align-content”对齐容器内的网格。]

摘自规范

为了清楚起见，提供了 CSS 网格布局规范的相关摘录：

• “可以通过使用网格项上的 justify-self 属性或网格容器上的 justify-items 属性来在内联维度中对齐网格项。”
• “网格项也可以通过使用网格项上的align-self属性或网格容器上的align-items属性在块维度中对齐。"
• "如果网格的外边缘不对应到网格容器的内容边缘，网格轨道根据网格容器上的 justify-content 和align-content 属性在内容框中对齐。”

以上是CSS 网格布局中的“align-items”和“align-content”有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！