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 属性硬设
直接给 flex 子项的 立即学习“前端免费学习笔记（深入）”； 现代浏览器中 真正卡住的往往不是 flex 写法，而是容器高度来源不明、图片未设 height: 100% 通常无效，因为它的父元素（比如 flex: 1 或 flex: 1 1 auto，确保它能撑满可用空间
width: 100%; height: 100%; object-fit: cover; —— 注意不是 background-image，就是原生 height 和 width HTML 属性（即删掉 避免 margin/padding/border 破坏等高对齐
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 拉伸高度完全可靠，但有两个现实约束：
flex: 1 在多行 flex 容器中支持异常，若需兼容，改用 flex: 1 1 0 并确保容器有明确高度min-height 占位，或用 JS 监听 load 后强制重排（小项目中加 img { min-height: 150px; } 更快）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;
}
display: block（防底部留白）、或忘了 box-sizing 导致 padding 多算了一圈。这些细节比 flex 属性本身更容易漏掉。
