align-self 是 Flexbox 中用于单个子项在交叉轴上独立对齐的属性，覆盖父容器 align-items 设置，默认值 auto 会继承父级值；它仅在 flex 容器中生效，不影响主轴对齐，常见于“多数一致、个别例外”的布局场景。
align-self 是用来覆盖 align-items 的单个子项对齐控制
它只在父容器是 display: flex 或 display: inline-flex 时生效，作用对象是某个具体的 flex 子元素（flex item），不是容器本身。它的核心价值就一句话：让某一个子项“不听话”，在交叉轴上按自己意愿对齐，其余子项照旧。
-
align-self的默认值是auto，此时它会继承父容器的align-items值；没父容器则等效于stretch - 只要给某个子元素设了非
auto的值（比如flex-end），它就立刻脱离统一规则，独立行动 - 这个属性不改变主轴对齐（那是
justify-content或order的事），只管交叉轴——而交叉轴方向取决于flex-direction：若为row，交叉轴是垂直方向；若为column，交叉轴是水平方向
什么时候必须用 align-self 而不是改 align-items
典型场景是“多数一致，个别例外”——比如表单里所有输入框垂直居中，但提交按钮要底部对齐；或者卡片布局中标题上对齐、操作按钮下对齐。
- 如果直接改容器的
align-items，所有子项都会跟着变，破坏原有设计意图 - 用
align-self可以最小化样式侵入，只动需要调整的那个元素 - 响应式中尤其有用：小屏时让某个导航项
align-self: flex-end靠右，大屏时又恢复默认，无需重写整套布局逻辑
align-self 常见取值和易错点
它的可选值和 align-items 完全一致，但行为更“局部”。最容易被忽略的是 stretch 和 baseline 的实际表现。
-
stretch不起作用？检查该子元素是否设置了固定高度/宽度（交叉轴方向）——有固定尺寸时，stretch会被忽略 -
baseline看起来没效果？确保子元素内有文本内容，且父容器没有align-items: stretch强制拉伸导致基线错位 -
flex-start/flex-end在flex-direction: column下是左右对齐，不是上下——很多人在这里写错方向预期
.container {
display: flex;
flex-direction: row; /* 主轴水平 → 交叉轴垂直 */
align-items: center; /* 默认全部垂直居中 */
height: 120px;
}
.item {
width: 80px;
height: 40px;
}
.item-special {
align-self: flex-end; /* 单独到底部，其他仍居中 */
}align-self 和 CSS Grid 中的 justify-self 是什么关系
它们名字像、作用像，但属于不同布局模型：align-self 是 Flexbox 的交叉轴对齐，justify-self 是 Grid 的行内轴（inline axis）对齐。不过两者都遵循“个体覆盖集体”的设计哲学。
立即学习“前端免费学习笔记（深入）”；
- 同一个元素如果既在 flex 容器里又在 grid 容器里（嵌套），只生效其直接父容器的对应属性
- 现代浏览器中两者兼容性都很好，但旧版 Safari 对
align-self: baseline支持不稳定，生产环境建议加降级处理 - 别试图用
align-self控制 Grid 子项——它不会生效，Grid 子项要用justify-self或align-self（Grid 版本，语义相同但上下文不同）
交叉轴方向依赖 flex-direction 这一点，是绝大多数人调试失败的第一原因。写之前先确认主轴朝哪，再决定 flex-start 到底是“顶”还是“左”。
