加了 display: flex 仍不等高最常见原因是子项含脱离文档流元素（如 position: absolute）或未约束的图片，导致父容器误判高度；其次为错误设置 height、align-self: flex-start 或 bootstrap 版本混用。
为什么加了 display: flex 还是不等高
最常见原因是子项内部存在脱离文档流的元素，比如 position: absolute 或 display: table-cell。这些元素不参与父容器的高度计算，导致 Flex 容器误判“最高列”的真实高度，其他列就只能拉伸到这个错误基准上。
另一个高频干扰项是图片：没设 max-width: 100% 或 height: auto 的图片会撑高某列，但因为宽高比固定、溢出或加载时机问题，可能只在某一列生效，破坏整体 stretch 行为。
- 检查子项是否意外设置了
height、min-height或flex-shrink: 0—— 这些都会抑制拉伸 - 确认父容器没有被覆盖成
display: block（尤其 Bootstrap 4 升级后混用旧 CSS 时） - 避免在子项上写
align-self: flex-start，它会覆盖默认的stretch
align-items: stretch 是默认行为，但别动它
你不需要显式写 align-items: stretch —— 只要父容器是 display: flex 且方向是 row（默认），子项就会自动拉伸到交叉轴（垂直方向）最大高度。
真正需要干预的是对齐意图：如果想让内容顶部对齐又保持等高，用 align-items: start；想居中且等高，用 align-items: center；只有设成 flex-start 才会彻底取消等高效果。
-
align-items: stretch是安全的默认值，删掉它反而容易出错 - 若某列内容需独立控制对齐，直接在该列加
align-self: center，不影响其他列 - 不要在父容器上设
align-items: baseline，它会让子项按文字基线对齐，高度不再一致
响应式换行时，等高只在“同一行”内有效
flex-wrap: wrap 后，Flex 容器会生成多行，而 align-items: stretch 只作用于当前行内的项目。这意味着第一行三列等高，第二行两列也等高，但两行之间高度互不影响。
如果你需要跨行统一高度（比如卡片网格全等高），flex 就不是最优解 —— 此时应切换到 display: grid，它的 grid-template-rows: 1fr 或隐式行高天然支持跨行等高。
- 用
gap替代margin控制间距，避免因 margin 折叠或负边距引发的换行错位 - 子项宽度别混用
flex: 1和width: 33.33%，flex-basis 优先级高于 width，容易导致列宽不均 - 移动端小屏下，建议用媒体查询禁用
flex-wrap并改用单列，比强行维持多列等高更自然
Bootstrap 4 和 5 对 d-flex 的处理差异很关键
Bootstrap 4 的 .row 默认是 display: block，必须手动加 d-flex 类才能触发等高；而 Bootstrap 5 的 .row 默认就是 display: flex，再加 d-flex 属于冗余，甚至可能因嵌套 flex 容器引发意外交互（比如子项的 flex 行为被双重解释）。
升级后仍习惯性加 d-flex，是很多“明明写了 flex 却不等高”的根源。
- BS5 中，优先检查是否误加了
d-flex—— 删掉它，看是否恢复正常 - BS4 中，确保没引入 BS3 的 CSS 文件，否则
d-flex类可能根本不存在 - 无论哪个版本，都不要在
.row上额外写style="display: block"，它会直接覆盖 flex 声明
overflow: hidden 配合 margin-bottom 导致视觉截断 —— 高度其实等了，但底部内容被切掉了，看起来像不等高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
