CSS布局中justify-items与align-items区别_子元素对齐方法

justify-items控制网格项在行内轴（水平）的对齐，align-items控制块轴（垂直）对齐，两者分别处理横向和纵向布局。

justify-items 和 align-items 是 CSS Grid 布局中的两个对齐属性，用于控制网格容器中子元素（网格项）在不同轴上的对齐方式。虽然名称相似，但它们作用的轴不同，理解这一点是掌握 Grid 布局对齐的关键。

justify-items：控制行内轴（横轴）对齐

justify-items 用于设置网格项在其单元格内沿 行内轴（inline axis） 的对齐方式，也就是水平方向（从左到右或右到左），具体取决于书写模式。

• start：对齐到单元格的起始边缘（通常是左侧）
• end：对齐到单元格的结束边缘（右侧）
• center：在单元格内水平居中
• stretch：拉伸以填满整个单元格（默认值）

例如，在一个从左到右书写的语言中，justify-items: center; 会让所有子元素在各自的网格单元格中水平居中。

align-items：控制块轴（纵轴）对齐

align-items 控制的是网格项在其单元格内沿 块轴（block axis） 的对齐，也就是垂直方向（从上到下）。

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

腾讯元宝

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

223

查看详情

• start：顶部对齐
• end：底部对齐
• center：垂直居中
• stretch：纵向拉伸填满单元格（默认）

设置 align-items: center; 后，所有子元素会在其所在单元格中垂直居中显示。

简单记忆方法

可以这样理解：

• justify- 对应 横轴（水平方向）——“justify”让人联想到文本两端对齐，是横向操作
• align- 对应 纵轴（垂直方向）——“align”在这里处理上下对齐

这与 Flexbox 中的主轴和交叉轴概念有相似之处，但在 Grid 中，这两个属性直接作用于网格容器，影响所有子项。

基本上就这些。只要分清横轴和竖轴，justify-items 和 align-items 的用途就很清晰了。实际使用时结合 grid 容器的定义，能更精准地控制布局对齐效果。

以上就是CSS布局中justify-items与align-items区别_子元素对齐方法的详细内容，更多请关注php中文网其它相关文章！