align-self 是唯一能对单个 flex 项在交叉轴上独立控制对齐的属性，覆盖父容器 align-items，取值同 align-items，auto 表示继承父级值；与 margin: auto 同时使用时后者优先；多行布局中仅作用于当前行。
align-self 是唯一能对单个 flex 项在交叉轴上独立控制对齐的属性，它直接覆盖父容器的 align-items 设置。
align-self 覆盖 align-items 的优先级规则
当父容器设置了 align-items: flex-start，但某个子项需要居中，只需给该子项加 align-self: center —— 它会立即生效，无需修改容器或其他子项。但要注意：
-
align-self只作用于交叉轴（即垂直方向默认情况下），对主轴（水平方向）无效 - 它的取值和
align-items完全一致：flex-start、flex-end、center、baseline、stretch（默认）、auto（继承父级align-items） -
auto不是“重置”，而是“回退到父级align-items值”，所以删掉align-self和设为auto效果一样
align-self 和 margin: auto 同时出现时谁赢？
如果一个子项同时写了 align-self: center 和 margin-bottom: auto，后者会完全压制前者，导致元素被顶到交叉轴起点（即“顶对齐”）。这是因为 margin: auto 在 flex 中有特殊语义：它会消耗交叉轴剩余空间，优先级高于 align-self。
- 调试时若发现
align-self没反应，第一反应应是检查是否误加了margin: auto或margin-top/bottom: auto - 想精确微调位置，用
align-self；想“把某一项挤到末尾”或“和其他项拉开距离”，直接用margin: auto更直观 - 二者混用不是错误，但需明确目的：比如
margin-top: auto把项推到底部，再加align-self: flex-end就多余了
align-self 在多行 flex-wrap 场景下的表现
当容器设了 flex-wrap: wrap，且子项跨多行时，align-self 依然只作用于当前行的交叉轴——也就是说，它不会影响其他行，也不会触发整行偏移。
- 它不改变行高，也不影响
align-content对多行整体的控制 - 如果某一行只有一个子项，又设了
align-self: stretch（默认），而该子项没设高度，则它会撑满整行高度；但如果该行有多个子项，stretch表现取决于它们的高度是否一致 - 在响应式布局中，避免依赖
align-self做“视觉居中”——因为换行后，同一项可能从第一行移到第二行，其交叉轴参考系已变
真正容易被忽略的是：当子项本身是块级元素且内部有内容时，align-self 控制的是该子项盒子的对齐，而不是其内部文字或子元素的对齐；文字水平对齐仍要靠 text-align，垂直对齐则可能需配合 display: flex 或 line-height 手动调节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
