css Grid子元素对齐justify-self align-self

justify-self 控制网格项在行内轴（横向）的对齐，常用值有 start、end、center、stretch；2. align-self 控制块轴（纵向）对齐，取值相同；3. 两者结合可实现单元格内完全居中；4. 可覆盖容器的 justify-items 和 align-items 默认设置。

在 CSS Grid 布局中，justify-self 和 align-self 是用来控制单个网格项（grid item）在其网格单元格（grid cell）内如何对齐的属性。它们作用于子元素本身，而不是整个网格容器。

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

该属性定义网格项在列方向（即行内轴，inline axis）上的对齐方式。

• start：对齐到单元格的起始边缘（左对齐，LTR 模式下）
• end：对齐到单元格的结束边缘（右对齐）
• center：在单元格内水平居中
• stretch：拉伸以填满整个单元格（默认行为）

.item {
  justify-self: center;
}

这个设置会让该网格项在其所在的列单元格中水平居中。

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

该属性定义网格项在行方向（即块轴，block axis）上的对齐方式。

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

• start：对齐到单元格顶部
• end：对齐到底部
• center：在单元格内垂直居中
• stretch：拉伸填满整个单元格（默认）

.item {
  align-self: center;
}

该元素会在其所在行单元格中垂直居中显示。

腾讯元宝

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

223

查看详情

两者结合使用

若希望某个网格项在单元格中完全居中，可以同时设置两个属性：

.item {
  justify-self: center;
  align-self: center;
}

这样，元素将在其网格单元格中水平和垂直都居中。

注意：如果网格容器上设置了 justify-items 或 align-items，它们会为所有子项设置默认对齐方式，而 justify-self 和 align-self 可以覆盖这些默认行为。

基本上就这些。合理使用这两个属性，能让你更精细地控制每个网格项的位置。不复杂但容易忽略细节。

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