图片不等宽因flex-shrink默认生效，需设flex-shrink: 0；flex-wrap列数不准因浏览器按内容宽换行，建议用flex: 0 0 calc(33.333% - 4px)；高度不齐需加height: auto或aspect-ratio；IE11须用完整flex三值写法并避免纯百分比flex-basis。
Flex容器设为display: flex后图片不等宽？检查flex-shrink是否默认生效
默认情况下，img 是可收缩的内联替换元素，即使你给每个图片设了 width: 25%，父容器一缩容，flex-shrink: 1 就会偷偷压缩它们——结果就是“看着写了25%，实际各不相同”。
实操建议：
- 给图片加
flex-shrink: 0，彻底禁用压缩 - 确保父容器没设
max-width或其他限制导致整体换行错乱 - 如果图片本身尺寸差异大，优先用
object-fit: cover统一裁剪，而不是靠 width 拉伸
用flex-wrap: wrap实现响应式多列，但列数总对不上？关键在子项flex-basis
只靠 width: 33.333% + flex-wrap 很容易在小屏下变成 2 列甚至 1 列，但列宽却不是整除后的均分值——因为浏览器按内容宽度计算换行点，不是按百分比四舍五入。
实操建议：
- 改用
flex: 0 0 calc(33.333% - 4px)（减去间隙），比纯width更可靠 - 间隙统一用
gap（现代浏览器），别用margin，否则会影响flex-basis计算 - 需要兼容旧版 Safari？
flex-basis必须写成flex-basis: 33.333%，不能省略单位
图片宽高比不一致时，width百分比+flex-wrap导致高度参差？别只盯width
设了 width: 25% 只控制水平尺寸，图片原始高度不同，容器高度就会撑开不齐——尤其瀑布流场景下，用户第一眼看到的就是“歪斜”。
实操建议：
- 给图片加
height: auto显式声明，避免某些浏览器用 intrinsic size 做奇怪推算 - 若需严格等高，用
aspect-ratio: 4/3（支持度 OK）或包装一层div+padding-top占位 - 慎用
vertical-align：它对 flex 子项无效，别白折腾
IE11里flex-wrap和百分比width同时失效？必须补全flex三值写法
IE11 的 Flex 实现有硬伤：flex: 1 或 flex: 0 0 25% 都可能被忽略，最终退化为单行溢出。它只认完整三值写法，且 flex-basis 不能是纯百分比（要带 px 或 em）。
实操建议：
- 写成
flex: 0 0 24.9%（注意小数点，IE 对整除敏感） - 配合
min-width: 0防止 IE 把图片当“不可压缩内容”卡死 - 真要保 IE11？放弃
gap，改用margin-right+:nth-child(n)清除最后一列 margin
最常被忽略的一点：flex 容器的 width 本身要是确定值（比如 100% 或具体像素），如果父级是 display: inline-flex 或没设宽，整个计算链就从根上漂移了——这时候调再多子项参数都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
