align-items 只作用于 flex 容器的直接子元素（flex item），控制其在交叉轴上的对齐方式；默认 flex-row 时交叉轴为垂直方向，flex-col 时为水平方向，需确保父容器为 flex 且具有明确高度。
align-items 在 Flex 容器里到底控制谁？
它只作用于直接子元素（即 flex item），对孙子辈完全无效。很多人写 align-items: center 没反应，其实是把容器设成了 flex，但忘了确认父容器确实是 flex 容器——比如用 flex 类后，还得确保没被其他 display 值覆盖。
- 必须在 flex 容器上加
align-items类，比如flex items-center - 如果子元素本身是块级或设置了
display: block，不影响对齐逻辑 - 注意：Grid 容器也支持
align-items，但行为不同——Flex 是沿 cross axis 对齐，Grid 是沿 block axis 对齐，别混用
items-start / items-center / items-end 有什么实际差异？
它们对应的是 cross axis（交叉轴）的起点、中点、终点。在默认 flex-row（主轴水平）下，cross axis 就是垂直方向；换成 flex-col 后，cross axis 变成水平方向，这时 items-center 就是水平居中了。
-
items-start→ 顶部对齐（row）或左对齐（col） -
items-center→ 垂直居中（row）或水平居中（col） -
items-end→ 底部对齐（row）或右对齐（col） - 别硬记“上下左右”，盯住容器的
flex-direction值来判断 cross axis 方向
为什么加了 items-center 没生效？常见卡点
不是类名写错，而是布局前提没满足。Tailwind 的 items-* 类只是快捷方式，背后仍是 CSS 的 align-items，所以依赖标准 flex 行为。
- 父容器没加
flex或inline-flex—— 这是最常见的漏项 - 子元素高度为
auto且内容单行，视觉上“看不出”居中效果（其实已生效，只是没对比） - 子元素用了
margin: auto或align-self覆盖了容器的align-items - 父容器高度未定义（如无
h-类或内容撑开），导致 cross axis 长度为 0，居中无意义
和 justify-content、self-align 混用时要注意什么？
justify-content 管主轴，align-items 管交叉轴，align-self 是 item 级别覆盖 align-items。Tailwind 里对应 justify-*、items-*、self-*。
-
self-center可以让某个 item 单独居中，不受容器items-start影响 - 同时用
justify-center和items-center才能真正实现“水平+垂直居中” - 如果容器是
flex-col，justify-center变成垂直居中，items-center变成水平居中——顺序不重要，含义才重要
对齐失效时，先看父容器是不是 flex，再看 cross axis 有没有可对齐的空间。很多“没反应”其实是高度塌陷或者方向误判，而不是类名写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
