align-items作用于弹性容器（需设display: flex/inline-flex），控制交叉轴对齐；flex-start合法，start无效；单行看align-items，多行还需关注align-content。
align-items 作用对象是容器，不是子项
很多人写 align-items: flex-start 没效果，第一反应是“属性写错了”，其实更可能是选错了目标元素。这个属性必须加在 弹性容器（即设置了 display: flex 或 display: inline-flex 的父元素）上，对子项本身加完全无效。
常见错误现象：
子项写了 align-items: flex-start，页面毫无变化；或者父容器没设 display: flex，只加了 align-items，浏览器直接忽略该声明。
- 必须确保父容器有
display: flex（或inline-flex） -
align-items只接受一个值，不支持空格分隔多个（比如不能写flex-start center） - 若容器主轴是水平的（默认），
align-items控制的是**交叉轴**上的对齐——也就是垂直方向；主轴为垂直时，它才控制水平对齐
flex-start 和 start 不是一回事
看着都带 “start”，但 flex-start 是 align-items 的合法值，而 start 是 align-self 或 justify-content 在某些书写模式下的逻辑值，不能混用。CSS 规范里没有 align-items: start 这种写法，浏览器会当作无效值丢弃。
使用场景：
你想让所有弹性子项顶部对齐（主轴水平时），就用 flex-start；想让某个子项单独偏移，才考虑 align-self: flex-start（它继承自 align-items，但可被单个子项覆盖）。
-
align-items: flex-start✅ 合法、常用 -
align-items: start❌ 无效，会被忽略 -
align-self: flex-start✅ 合法，用于单个子项覆盖容器设置
高度未定义时 flex-start 可能“看不见”效果
如果弹性容器本身没有明确高度（比如没设 height 或 min-height），且子项内容又很短，那么即使写了 align-items: flex-start，视觉上也像没生效——因为容器高度刚好被子项撑开，没有“多余空间”供对齐参考。
性能 / 兼容性影响：
这个属性本身无性能开销，但若容器高度靠 JS 动态计算，又依赖 align-items 布局，容易引发回流；IE10–IE11 支持 flex-start，但不支持 stretch 的某些边界行为，不过这和本例无关。
- 测试时给容器加个临时
height: 200px或min-height: 100vh，立刻能看出对齐是否起作用 - 不要依赖父容器由内容撑高后再做交叉轴对齐，那本质上不是
flex-start在工作，而是文档流默认表现 - Flex 容器的交叉轴尺寸（比如高度）必须可测量，
align-items才有参考基准
和 align-content 的区别别搞混
align-items 管的是“单行内子项怎么对齐”，align-content 管的是“多行子项之间怎么分配剩余空间”。如果你用了 flex-wrap: wrap 且子项换行了，又看到顶部没贴紧，第一反应不该是调 align-items，而应检查是否误用了 align-content: flex-start（它只在多行时生效）。
常见错误现象：
容器设了 flex-wrap: wrap，子项实际占两行，但顶部留白——这时 align-items 依然控制每行内部的对齐，真正决定两行整体是否顶着容器上边缘的，是 align-content。
- 单行 Flex：只看
align-items - 多行 Flex：
align-items控制每行内子项对齐，align-content控制行与行之间的对齐 -
align-content默认值是stretch，不是flex-start，所以多行时往往需要显式设
容器高度、作用对象、取值合法性、单行/多行语义——这几个点卡住，align-items: flex-start 就容易变成“写了等于没写”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
