首页  >  文章  >  web前端  >  CSS 网格布局中的“align-items”和“align-content”有什么区别?

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

Barbara Streisand
Barbara Streisand原创
2024-11-01 01:49:28128浏览

What's the difference between

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

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

网格术语说明

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

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

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

  • justify-contentalign-content 对齐网格容器内容框中的网格轨道。
  • justify-selfjustify-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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn