css Grid子元素对齐align-items与justify-items

align-items控制网格项在交叉轴（默认垂直）的对齐，justify-items控制主轴（默认水平）的对齐，两者用于统一设置，而align-self和justify-self可单独调整特定项的对齐方式。

在使用 CSS Grid 布局时，align-items 和 justify-items 是控制网格项（grid items）在单元格内对齐方式的重要属性。它们分别处理交叉轴和主轴方向的对齐，理解它们的区别和用法能更精准地控制布局。

align-items：控制垂直对齐（交叉轴）

该属性作用于网格容器，定义所有网格项在其单元格内的交叉轴（cross axis）上的对齐方式。在默认的行排列模式下，交叉轴是垂直方向。

• start：元素在交叉轴起点对齐（顶部）
• end：元素在交叉轴终点对齐（底部）
• center：元素在交叉轴居中对齐
• stretch：元素拉伸以填满整个单元格（默认值）

例如，让所有子元素在单元格中垂直居中：

.grid-container {
  display: grid;
  align-items: center;
}

justify-items：控制水平对齐（主轴）

该属性定义网格项在其单元格内的主轴（main axis）方向上的对齐方式。在默认的行排列下，主轴是水平方向。

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

腾讯元宝

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

223

查看详情

• start：元素在主轴起点对齐（左侧，LTR）
• end：元素在主轴终点对齐（右侧）
• center：元素在主轴方向居中
• stretch：元素拉伸填满单元格（默认值）

例如，让所有子元素在单元格中水平居中：

.grid-container {
  display: grid;
  justify-items: center;
}

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

如果只想调整某个特定网格项的对齐方式，可以使用 align-self 和 justify-self，它们的作用与上述两个属性相同，但只针对单个子元素。

示例：让某个子项在单元格中右对齐：

.grid-item-special {
  justify-self: end;
}

基本上就这些。掌握 align-items 和 justify-items 能帮你快速统一网格项的内部对齐，而通过 -self 属性可灵活处理个别元素。不复杂但容易忽略细节，尤其是在不同书写模式或网格方向下轴的方向会变化，但大多数情况下按“垂直 vs 水平”理解即可。

以上就是css Grid子元素对齐align-items与justify-items的详细内容，更多请关注php中文网其它相关文章！