如何在CSS Grid中控制子元素对齐_align-items与justify-items使用

align-items和justify-items分别控制网格项在纵轴和横轴的对齐方式，前者处理垂直方向，后者处理水平方向；常用值包括start、end、center和stretch（默认），可通过align-self与justify-self单独调整特定子元素的对齐行为，实现精确布局控制。

在CSS Grid布局中，控制子元素（网格项）的对齐方式主要依靠 align-items 和 justify-items 两个属性。它们分别处理交叉轴（纵轴）和主轴（横轴）上的对齐行为，帮助你精确控制网格单元内子元素的位置。

align-items：控制纵轴对齐（垂直方向）

align-items 决定网格项在其网格区域内的垂直对齐方式。它作用于每一行网格区域的交叉轴方向（通常为垂直方向）。

• start：对齐到网格区域的起始边缘（上边）
• end：对齐到网格区域的结束边缘（下边）
• center：在网格区域内垂直居中
• stretch：拉伸以填满整个网格区域（默认值）

示例：

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  align-items: center; /* 所有子元素垂直居中 */
}

justify-items：控制横轴对齐（水平方向）

justify-items 控制网格项在其网格区域内的水平对齐方式，作用于主轴方向（通常是水平方向）。

立即学习“前端免费学习笔记（深入）”；

• start：左对齐（LTR环境下）
• end：右对齐
• center：水平居中
• stretch：拉伸填满网格区域（默认值）

示例：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  justify-items: center; /* 所有子元素水平居中 */
}

单独控制某个子元素：align-self 与 justify-self

如果只想调整某个特定子元素的对齐方式，可以使用 align-self 和 justify-self，它们会覆盖容器上设置的 align-items 和 justify-items。

例如：

.grid-item-2 {
  align-self: start;
  justify-self: end;
}

这会让第二个子元素在垂直方向靠上、水平方向靠右，不受容器统一设置的影响。

基本上就这些。合理使用 align-items 和 justify-items，再配合 align-self 与 justify-self，就能灵活控制Grid中每个子元素的对齐位置，实现精准布局。不复杂但容易忽略细节，比如默认拉伸行为可能影响预期效果，记得检查是否需要关闭 stretch。

以上就是如何在CSS Grid中控制子元素对齐_align-items与justify-items使用的详细内容，更多请关注php中文网其它相关文章！