justify-self用于Grid布局中控制子元素在行内轴（横轴）的对齐，如center、start等；align-self在Grid和Flexbox中均有效，控制块轴（纵轴）对齐，如center、flex-start。前者仅适用于Grid，后者通用，优先级高于父容器设置。
在 CSS Grid 或 Flexbox 布局中，
justify-self
和
align-self
用于控制子元素在其容器内的对齐方式，但它们作用的方向不同。理解这两个属性的关键在于明确主轴与交叉轴、以及布局上下文（Grid vs Flexbox）。
justify-self：控制行内轴（横轴）对齐
justify-self
主要用于
Grid 布局
中的子元素，决定该项目在单元格内的水平对齐方式（即行内轴方向）。
常见取值包括：
start
：靠单元格起始边对齐
end
：靠单元格结束边对齐
center
：居中对齐
stretch
：拉伸以填满单元格（默认值）
示例：
立即学习
“
前端免费学习笔记（深入）
”；
注意：
在 Flexbox 中 justify-self 不生效
，因为主轴对齐由父容器的 justify-content 控制，子项无法单独使用 justify-self 调整主轴位置。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
align-self：控制块轴（纵轴）对齐
align-self
在
Grid
和
Flexbox
中都可用，用于控制单个子项在交叉轴上的对齐方式。
常见取值：
flex-start
/
start
：顶部对齐
flex-end
/
end
：底部对齐
center
：
垂直居中
stretch
：拉伸填满容器（默认）
baseline
：基线对齐（文本场景常用）
在 Grid 中示例：
在 Flexbox 中示例：
关键区别总结
justify-self
：仅在 Grid 中有效，控制横向（行内轴）对齐
align-self
：在 Grid 和 Flexbox 中都有效，控制纵向（块轴）对齐
Flexbox 子元素不能用 justify-self 调整主轴位置，应由父级 justify-content 统一控制
两者都是“自我对齐”，优先级高于父容器的 justify-items 或 align-items
基本上就这些。掌握这两个属性的重点是分清布局模式和轴方向。Grid 提供更精细的二维控制，而 Flexbox 更偏向一维流动布局。align-self 更通用，justify-self 是 Grid 特有的横向控制工具。不复杂但容易忽略细节。
.container {
display: grid;
grid-template-columns: 100px 100px;
}
.item {
justify-self: center; /* 在列单元格内水平居中 */
}
.item {
align-self: center; /* 在行单元格内垂直居中 */
}
.flex-container {
display: flex;
align-items: flex-start;
}
.flex-item {
align-self: center; /* 此项单独垂直居中，其余按容器设置对齐 */
}