CSS中justify-self和align-self用法详解

在 CSS 布局中，justify-self 和 align-self 是实现子元素精细化对齐的关键属性：justify-self 专用于 Grid 布局，控制子项在行内轴（横向）上的对齐方式，如居中、靠左或拉伸；而 align-self 则更具通用性，在 Grid 和 Flexbox 中均可使用，负责块轴（纵向）的独立对齐，且优先级高于父容器的统一设置。二者虽同属“自我对齐”机制，但适用场景、作用方向和布局上下文截然不同——混淆主轴与交叉轴、忽略 Grid 与 Flexbox 的能力差异，往往是布局失效的根源。掌握它们，意味着你能更精准地驾驭二维网格的灵活定位，也能在弹性布局中实现单个元素的破例对齐，让页面控制力跃升一个层次。

在 CSS Grid 或 Flexbox 布局中，justify-self 和 align-self 用于控制子元素在其容器内的对齐方式，但它们作用的方向不同。理解这两个属性的关键在于明确主轴与交叉轴、以及布局上下文（Grid vs Flexbox）。

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

justify-self 主要用于 Grid 布局 中的子元素，决定该项目在单元格内的水平对齐方式（即行内轴方向）。

常见取值包括：

• start：靠单元格起始边对齐
• end：靠单元格结束边对齐
• center：居中对齐
• stretch：拉伸以填满单元格（默认值）

示例：

.container {
  display: grid;
  grid-template-columns: 100px 100px;
}
.item {
  justify-self: center; /* 在列单元格内水平居中 */
}

注意：在 Flexbox 中 justify-self 不生效，因为主轴对齐由父容器的 justify-content 控制，子项无法单独使用 justify-self 调整主轴位置。

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

align-self 在 Grid 和 Flexbox 中都可用，用于控制单个子项在交叉轴上的对齐方式。

常见取值：

• flex-start / start：顶部对齐
• flex-end / end：底部对齐
• center：垂直居中
• stretch：拉伸填满容器（默认）
• baseline：基线对齐（文本场景常用）

在 Grid 中示例：

.item {
  align-self: center; /* 在行单元格内垂直居中 */
}

在 Flexbox 中示例：

.flex-container {
  display: flex;
  align-items: flex-start;
}
.flex-item {
  align-self: center; /* 此项单独垂直居中，其余按容器设置对齐 */
}

关键区别总结

• justify-self：仅在 Grid 中有效，控制横向（行内轴）对齐
• align-self：在 Grid 和 Flexbox 中都有效，控制纵向（块轴）对齐
• Flexbox 子元素不能用 justify-self 调整主轴位置，应由父级 justify-content 统一控制
• 两者都是“自我对齐”，优先级高于父容器的 justify-items 或 align-items

基本上就这些。掌握这两个属性的重点是分清布局模式和轴方向。Grid 提供更精细的二维控制，而 Flexbox 更偏向一维流动布局。align-self 更通用，justify-self 是 Grid 特有的横向控制工具。不复杂但容易忽略细节。

今天关于《CSS中justify-self和align-self用法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！