align-self: flex-start 必须配合 display: flex 父容器才生效，否则被浏览器静默忽略；它在 flex-direction: row 时顶部对齐，在 column 时左对齐，且优先级高于 align-items，覆盖其效果。
align-self: flex-start 必须配合 display: flex 父容器
单独写 align-self: flex-start 没用，浏览器会静默忽略。父容器没设 display: flex 或 display: inline-flex，这个属性就完全不生效。
常见错误是只给子元素加样式，比如：.header { align-self: flex-start; }
但忘了在父级上写：.container { display: flex; align-items: center; }
- Flex 所有对齐属性（包括
align-self）都依赖父容器的 Flex 上下文 - 如果父容器是
flex-direction: column，align-self: flex-start实际表现是“水平靠左”，不是“顶部”——因为此时交叉轴是水平方向 - 想让子元素真正“顶部对齐”，父容器应保持默认
flex-direction: row，这样交叉轴才是垂直方向，flex-start才对应顶部
align-self: flex-start 和 align-items 冲突时谁生效？
align-self 永远覆盖 align-items，这是它的设计目的。哪怕父容器写了 align-items: center，只要某个子元素明确设了 align-self: flex-start，它就会顶部对齐，其他子元素不受影响。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 这个覆盖只作用于渲染阶段，不改变父容器的
align-items计算逻辑 -
align-self: auto不等于“无效果”，它会继承父容器的align-items值；如果父容器没设，就按默认stretch处理 - 想让某子项“不拉伸又不居中”，别留空，显式写
align-self: flex-start或align-self: center
为什么写了 align-self: flex-start 还没顶部对齐？
最可能的原因是：子元素本身有固定高度或 min-height，或者设置了 margin/padding 干扰了对齐位置；也可能是父容器没设高度，导致交叉轴尺寸为 0，所有对齐都失效。
- 检查父容器是否设置了明确高度（如
height: 200px）或最小高度（min-height: 100vh） - 确认子元素没有
margin-top类样式把自身往下推 - 避免同时设置
align-self: flex-start和margin: auto，后者在 Flex 中会干扰对齐逻辑 - 如果子元素是文字内容，注意
line-height和font-size可能造成视觉偏移，这不是align-self的问题，而是基线对齐残留影响
flex-direction: column 下怎么让子元素顶部对齐？
此时主轴是垂直方向，交叉轴变成水平方向，align-self: flex-start 会让元素左对齐。真要“顶部对齐”，该用 justify-content: flex-start —— 因为它控制的是主轴对齐，而主轴现在是垂直的。
- 不要混淆主轴/交叉轴：主轴由
flex-direction决定，justify-content管主轴，align-items/align-self管交叉轴 - 所以
flex-direction: column+justify-content: flex-start= 所有子元素顶部堆叠 - 若只想某一个子元素顶部对齐，而其他仍居中，就得换思路：用
margin-top: auto推开后面的兄弟元素，或改用 Grid
align-self 控制的是交叉轴，不是“绝对顶部”。它的行为完全取决于父容器的 flex-direction 和尺寸上下文，而不是页面或视口顶部。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
