Flex子元素高度不一致主因是父容器高度塌陷、子项设了固定height或min-height、混用float/absolute定位，以及align-content/stretch在多行时的拉伸行为；需确保父容器有高度、子项不干扰flex拉伸、显式设置align-content:flex-start应对多行，必要时改用Grid。
flex布局下子元素高度不一致怎么办
Flex容器默认会让所有子项拉伸到容器最大高度，但前提是父容器有明确高度，或者子项本身没设置 height 或 min-height 干扰。常见现象是：三列文字长度不同，视觉上高度参差，但实际 DOM 中高度已等高——只是背景色/边框没撑开，误以为“没生效”。
- 确保父容器设置了
display: flex，且没有flex-direction: column（否则变成单列） - 子元素不要写
height: 100%或固定height，会覆盖 flex 的拉伸行为 - 如果子项内有绝对定位元素，它不会参与高度计算，可能导致内容被截断
- 移动端 Safari 旧版本（iOS 12 及更早）对
align-items: stretch（默认值）支持不稳定，可显式加上
为什么加了 display: flex 还是不等高
大概率是父容器高度塌陷了——flex 布局不会自动让父容器“包裹”子项高度，尤其当子项用 float、position: absolute 或内部清浮动失效时。此时 flex 子项确实等高了，但父容器高度为 0，视觉上就“消失”了。
- 检查父容器是否被上层元素设了
height: 0、overflow: hidden或position: absolute - 子项里避免混用
float；若必须用，记得在父容器加display: flex后再补clear: both已无效，应改用flex-wrap或清除浮动逻辑移至 flex 外层 - 用浏览器开发者工具选中父容器，看 computed height 是否合理；若为 auto 但数值极小，说明内容没撑开它
多列等高但需要最后一行左对齐（非完全填满）
Flex 默认的 flex-wrap: wrap 遇到换行时，最后一行子项仍会被拉伸等高，破坏布局节奏。这不是 bug，而是 align-content: stretch 的默认行为。
- 给父容器加
align-content: flex-start，让多行时不拉伸行间距 - 但注意：这仅影响多行情况；单行时
align-content不生效，等高仍由align-items控制 - 如果希望“每行内部等高 + 行与行之间不拉伸”，就得接受每行单独一个 flex 容器，或改用
display: grid - Grid 在等高 + 换行对齐上更可控，但兼容性比 flex 略弱（IE11 不支持 gap 等关键特性）
flex 等高在表单或图片场景下的意外表现
表单控件（如 textarea、select）和图片常自带默认 vertical-align 和基线对齐逻辑，在 flex 下可能产生额外空白或错位，看起来像“不等高”。
立即学习“前端免费学习笔记（深入）”；
- 给所有子项统一加
align-self: stretch（虽然默认就是，但显式声明可排除继承干扰） - 图片加
vertical-align: top或display: block，消除行内元素默认的基线间隙 -
textarea默认有resize: both，拖拽后高度脱离 flex 控制，建议限制为resize: vertical或禁用 - 若子项含
margin-bottom，它会在拉伸后依然存在，导致底部留白——这不是高度不等，而是外边距叠加
