CSS 网格布局中的'align-items”和'align-content”有何不同？

理解 CSS 网格布局中 Align-Items 和 Align-Content 的区别

网格布局综合指南中，“justify/align-items”的概念” 和“justify/align-content”属性被引入。虽然作者建议当网格大小小于其容器时使用“-content”属性，但这个概念适用于两组属性。

定义网格系统的组件

• 网格容器： 包含网格及其项目的父元素，建立格式化上下文。
• 网格： 形成区域的相交线网格用于占据网格项目。
• 网格项目：放置在网格区域内的元素。

网格和网格项目的对齐

justify-content 和align-content 属性控制网格在其容器内的对齐方式，而justify-self、justify-items、align-self 和align-items 则控制各个网格项目的对齐方式。

说明概念

考虑一个小于其容器的网格，如下所示：

[容器中具有额外空间的网格布局图像]

在这种情况下， justify-content 和align-content 属性可用于分配额外的空间。例如， justify-content: end 使网格右对齐，而align-content: center 垂直居中。

超越大小考虑

即使网格大小与容器大小匹配，对齐-content 和 justify-content 属性仍然有效。它们启用诸如 space-around、space- Between 和 space-evenly 之类的间距选项，这些选项在网格轨道之间分配可用空间。

规范亮点

CSS 网格布局规范阐明了这些选项的作用属性：

• 10.3：行轴对齐： justify-self 和 justify-items 水平对齐网格项目。
• 10.4：列轴对齐：align-self 和align-items 垂直对齐网格项目。
• 10.5：对齐网格： justify-content 和align-content 对齐容器内的网格，如果网格的外边缘与容器的内容边缘不匹配。

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