flex 容器需设高度或 min-height 才能使子项等高拉伸，因 align-items:stretch 在无高度约束时无效；图片应设 width:100%;height:100%;object-fit:cover 并移除 HTML 宽高属性，父容器用 flex:1 且 box-sizing:border-box，横向间距用 gap 而非 margin。
flex 容器必须设高度或最小高度
只写 display: flex 不足以让子项等高拉伸，因为 flex 项默认按内容高度 排列。若父容器没明确高度约束，align-items: stretch（默认值）实际无效。
常见错误是给图片列表容器加了 display: flex 和 flex-wrap: wrap，但忘了设 min-height 或固定 height，结果所有
- 对“单行等高”：给容器设
height: 200px或min-height: 200px - 对“多行网格式等高”：推荐用
grid；若坚持用 flex，需配合align-items: stretch+ 容器有明确高度上下文（如父级设display: flex; flex-direction: column并限制高度） - 避免用
height: 100%除非所有祖先都有显式高度——这在 响应式布局 里极易断裂
图片本身要参与高度拉伸，不能靠 width/height 属性硬设
直接给 height: 100% 通常无效，因为它的父元素（比如
）若没高度，百分比就无参照。更可靠的方式是让图片“填满其容器”，并允许缩放。
- 给图片父容器（如 ）设
flex: 1或flex: 1 1 auto，确保它能撑满可用空间- 图片自身设
width: 100%; height: 100%; object-fit: cover;—— 注意不是background-image，就是原生- 务必移除图片的
height和widthHTML 属性（即删掉避免 margin/padding/border 破坏等高对齐
flex 子项的
margin、内边距或边框会叠加到计算高度上，导致视觉不齐——尤其当部分项有悬停边框、或某些项加了padding而其他没有时。立即学习 “ 前端免费学习笔记（深入）”；
- 统一用
box-sizing: border-box给所有子项，让 padding/border 包含在尺寸内 - 横向间距用
gap（flex 容器上），而非子项的margin-right/margin-bottom；gap不影响拉伸逻辑 - 慎用
margin-top或margin-bottom：它们可能触发基线对齐（align-items: baseline），而不是拉伸
兼容性与 fallback 要点
现代 浏览器 中
flex + align-items: stretch拉伸高度完全可靠，但有两个现实约束：- IE11 对
flex: 1在多行 flex 容器中支持异常，若需兼容，改用flex: 1 1 0并确保容器有明确高度 - 图片加载异步，初始高度为 0，可能导致 flex 高度塌陷；可加
min-height占位，或用 JS 监听load后强制重排（小项目中加img {min-height: 150px;}更快） - 如果图片比例差异极大（如 1:1 和 16:9 混排），
object-fit: cover会裁剪，此时“等高”不等于“等比例可见”，需提前约定图源尺寸或用 后端 裁切
.image-list {display: flex; flex-wrap: wrap; gap: 12px; min-height: 300px;} .image-item {flex: 1 1 200px; box-sizing: border-box; min-height: 200px;} .image-item img {width: 100%; height: 100%; object-fit: cover; display: block;}真正卡住的往往不是 flex 写法，而是容器高度来源不明、图片未设
display: block（防底部留白）、或忘了box-sizing导致 padding 多算了一圈。这些细节比 flex 属性本身更容易漏掉。 - 图片自身设
