align-items: flex-start 未生效最常见的原因是父容器未设置 display: flex 或 inline-flex；其次需检查 flex-direction 方向影响交叉轴、align-self 冲突及替代方案。
align-items: flex-start 为什么没生效
最常见的原因是父容器根本不是 Flex 布局。align-items 只对 display: flex 或 display: inline-flex 的容器有效，对普通块元素、Grid 容器或未设 display 的 div 完全无效。
- 检查父元素是否明确写了
display: flex（不能只靠子元素触发 BFC 或其他隐式行为） - 确认没有被更高级别的 CSS 规则覆盖，比如通过
!important或更高优先级选择器重置了align-items - 如果用了
flex-direction: column，注意此时“交叉轴”变成水平方向，flex-start表示左对齐，不是顶部对齐
flex-start 在 row 和 column 方向下对齐位置不同
Flex 布局里，“交叉轴”由 flex-direction 决定，所以 align-items: flex-start 的实际效果会变：
- 当
flex-direction: row（默认），主轴水平 → 交叉轴垂直 →flex-start= 顶部对齐 - 当
flex-direction: column，主轴垂直 → 交叉轴水平 →flex-start= 左侧对齐 - 若需要固定“顶部对齐”，别依赖
flex-start，改用align-items: start（部分浏览器支持，但兼容性弱）或直接换方向 + 调整justify-content
和 align-self 冲突时谁赢
align-self 是子元素自己的属性，优先级高于父容器的 align-items。哪怕父级设了 align-items: flex-start，只要某个子元素写了 align-self: center，它就会居中，其它子元素才按 flex-start 对齐。
- 调试时如果只有部分子项没对齐，立刻查这些子项是否设置了
align-self -
align-self: auto（默认值）会继承父级align-items，可用来“恢复”统一行为 - 注意：
align-self对display: block子元素无效，只作用于 Flex 项目
替代方案：不用 align-items 也能起点对齐
如果父容器不能或不便设为 Flex（比如要兼容老浏览器，或布局逻辑复杂），起点对齐仍有更直接的办法：
立即学习“前端免费学习笔记（深入）”；
- 纯垂直起点对齐（顶对齐）：给子元素加
vertical-align: top，前提是它们是inline或inline-block - 纯水平起点对齐（左对齐）：多数情况本就是默认行为，无需额外设置；若失效，先看是否意外触发了
text-align: center或margin: auto - 绝对定位强制对齐：
position: absolute; top: 0; left: 0，但脱离文档流，慎用于响应式场景
align-self 静默覆盖——动手前先用浏览器 DevTools 看一眼 computed 样式里的 align-items 和 align-self 实际值，比猜快得多。 
