理解网格布局中“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中文网其他相关文章！
