align-items: center本身不会导致塌陷，而是暴露父容器高度未定义的问题：父容器height: auto时，其高度仅由内容撑开（如24px），align-items: center只能在此微小空间内居中子元素，视觉上紧贴顶部，看似塌陷。
align-items: center 不会让子元素塌陷，但会让“居中”失效得像塌陷
这不是 align-items: center 本身导致塌陷，而是它暴露了父容器高度未定义这个根本问题。你看到的“子元素紧贴顶部”“背景没铺满”“滚动条不出现”，其实是因为父容器计算出的高度只有 24px（一行文字撑开的高度），align-items: center 只是把子元素垂直居中在这个 24px 高度里——结果就是视觉上卡在顶部附近，像塌了一样。
父容器 height: auto 是罪魁祸首
Flex 布局不生成高度，只分配空间。只要父容器没设 height 或 min-height，它的高度就由内容决定；而子元素又依赖父容器有高度才能居中——形成死循环。
- 常见写法：
.parent { display: flex; align-items: center; }→ 父容器高度 = 子元素内容高度（比如一个按钮高 40px） - 错误预期：以为
align-items: center会“拉高”父容器，实际它只管对齐，不管撑高 - 验证方法：打开 Chrome DevTools，看 .parent 的 computed
height值是不是远小于视口或你期望的值
嵌套 Flex 容器时，align-items 失效更隐蔽
如果子元素自己也是 display: flex，那它的内部布局完全脱离父级 align-items 控制。此时即使父容器有足够高度，子 Flex 容器也可能因为自身没撑开而显示为“空盒子”。
- 典型表现：父容器设置了
min-height: 100vh，但子 Flex 区域还是看不见背景色 - 原因：子 Flex 容器没设
min-height: 0，被默认align-items: stretch抑制了自身高度增长（尤其内部只有绝对定位元素时） - 修复关键点：
.child-flex { min-height: 0; }+ 确保它内部有真实内容高度（不是全position: absolute）
overflow: auto + align-items: center 容易掩盖真实问题
当父容器是 position: fixed 或设了 top/bottom，它的高度被严格计算（比如 bottom: 0），此时 align-items: center 会强制子元素填满这个固定高度——但子内容若超出，反而因无溢出空间而被截断，滚动条也不出现。
- 现象：内容明明很多，却只能看到顶部几行，且无法滚动
- 本质：子元素被
stretch拉满后，内部内容被压缩进固定高度，浏览器判定“无溢出” - 解法不是去掉
align-items: center，而是给子 Flex 容器加align-self: flex-start或min-height: 0，解除拉伸约束
align-items 这个属性本身，而是它背后那一层又一层、没显式声明的高度依赖链。改样式前，先查 computed height。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
