嵌套列表子项高度不一致，根本原因是父容器缺乏明确交叉轴约束，导致align-items: stretch无基准可依；需确保外层有明确高度、内层显式继承高度或改用分层结构横向对齐同类区块。
为什么嵌套列表里子项高度不一致
Flex 布局中嵌套列表（比如 .list-item 里再套一层 .sub-list）出现高度不对齐，根本不是子项没写 height，而是父容器没形成有效的交叉轴约束。典型场景：三列卡片各自含标题、描述、按钮，但描述文本行数不同 → 每张卡片高度不同 → 整体错位。
关键点在于：align-items: stretch 只对直接子元素生效，不会穿透嵌套层级；且如果外层容器没设明确高度或未触发 BFC，内部 flex 子项的“拉伸”就失去参照基准。
- 父容器缺少
height或min-height，导致align-items: stretch无尺寸可依 - 嵌套的内层 flex 容器用了
flex-direction: column，但没设height: 100%或flex: 1，无法继承父高 - 子项设置了
margin或padding，而父容器未用box-sizing: border-box，实际占用空间超出预期
用分层结构替代嵌套 flex
别在每个卡片内部独立搞 flex，而是把同类区块抽出来，横向组成对齐层。例如所有标题放在同一行 flex 容器里，所有描述放另一行，所有按钮再一行 —— 这样同层元素天然受同一 align-items: stretch 控制，高度自动对齐。
HTML 结构要改：
<div class="row-header"> <div>标题 A</div> <div>标题 B</div> <div>标题 C</div> </div> <div class="row-body"> <div>长描述…</div> <div>短</div> <div>中等长度</div> </div>
CSS 只需：
.row-header, .row-body {
display: flex;
}
.row-header > div,
.row-body > div {
flex: 1;
}
这样比在每个 .card 内部写 display: flex; flex-direction: column 更可靠，也避免了嵌套带来的尺寸计算干扰。
必须显式控制内层 flex 的高度继承
如果非得保留嵌套结构（比如 CMS 输出无法改 HTML），那就得手动打通高度链：
- 外层容器必须有明确高度，如
height: 400px或min-height: 300px - 中间容器（如
.card）设display: flex; flex-direction: column; height: 100% - 内容区（如
.card-content）用flex: 1，而不是height: 100%—— 后者在 flex context 下可能被忽略 - 避免在子项上写
height: auto或min-height: unset，它们会打断 flex 拉伸逻辑
常见错误是只给最外层设 display: flex，却忘了给中间层加 height: 100%。浏览器不会自动把高度透传进嵌套 flex 容器。
gap 和 margin 混用会导致视觉高度偏差
用 gap 做间距时，它不参与盒模型计算；但若同时在子项上写了 margin，就会叠加出意料之外的空白，让“看起来”的高度不一致。
- 统一用
gap，删掉所有相关子项的margin - 如果必须兼容老浏览器（IE），改用
margin+:not(:last-child)排除末项，别混用 - 检查是否对
p、h3等默认带margin的元素做了重置 —— 尤其是嵌套在 flex 里的文本块，margin-top会撑开容器高度
高度对齐问题往往卡在细节：一个没重置的 p 上下边距、一层漏掉的 height: 100%、或 gap 和 margin 的冲突。动手前先用开发者工具选中元素，看 computed tab 里实际生效的高度和 margin 是多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
