flex-wrap: wrap 是实现图片换行的必要条件，缺省会导致所有图片强行挤在一行；需配合 box-sizing: border-box、gap 控制间距、IE11 降级三值 flex 写法及 aspect-ratio 或伪元素防抖动。
flex-wrap: wrap 是换行的唯一开关，不加它图片就死扛一行
所有图片挤成一条细线，或触发横向滚动——这不是 bug，是 Flex 默认行为 flex-wrap: nowrap 的必然结果。你看到“排不下”，根源就在这儿。哪怕容器只有 320px 宽，浏览器也会强行把 12 张图压进一行。
实操建议：
-
display: flex必须配flex-wrap: wrap，缺一不可 - 别指望
justify-content或媒体查询能绕过它 - 旧版 Safari 在
inline-flex容器里对flex-wrap支持不稳定，外层统一用display: flex
flex-basis: 25% 不等于“一定能排四列”，box-sizing 和 gap 才决定是否严丝合缝
只写 flex-basis: 25%，但子项有 padding 或左右 margin，25% + 两边间距就可能超 100%，导致单行只能排 3 个甚至 2 个。常见错误现象：明明设了 4 列，却总在第三张后就换行。
实操建议：
- 所有图片项统一加
box-sizing: border-box - 优先用
gap控制间距（gap: 16px），不用 margin；若必须用 margin，改写为flex-basis: calc(25% - 8px)（假设左右各 4px） - 父容器不要设左右 padding 影响主轴尺寸参照，如需内边距，改用
padding-top/bottom
IE11 下 flex-basis 百分比大概率失效，必须降级三值写法+小数精度
IE11 对 flex-basis: 25% 解析极不稳定：首屏渲染正常，刷新后错位；或仅在 devtools 打开时才生效。根本原因是它不认单独的百分比值，也不支持整除浮点精度。
实操建议：
- 必须写完整三值：
flex: 0 0 24.9%（不能写25%或33.33%） - 补
width: 25%作为降级 fallback - 子项含图片或文本时，加
min-width: 0，否则 IE11 会按“最小内容宽度”卡死布局 - 父容器自身必须有明确宽度（如
width: 100%），否则百分比链失去参照基准
图片加载抖动不是代码问题，是尺寸未预留导致容器塌陷
原生 <img> 加载前无尺寸，Flex 容器高度塌陷，造成布局抖动甚至错行——这不是你 CSS 写错了，是加载机制问题。
实操建议：
- 现代方案：给图片父容器（如
<figure></figure>）加aspect-ratio: 16/9（Chrome 103+ / Firefox 98+ / Safari 16.4+） - 兼容方案：伪元素撑高 ——
::before { content: ""; display: block; padding-top: 56.25%; } - 服务端若能输出
width和height属性，浏览器可提前预留空间，比 CSS 更准 - 避免对
<img>直接设height: 100%且父容器没高度，图片会消失
真正麻烦的不是写几行 CSS，而是当图片尺寸不一、加载异步、浏览器版本混杂时，flex-basis 的计算值是否还能严丝合缝地落在容器内——这需要你在 gap、box-sizing、父容器宽度、IE11 降级写法之间反复对齐，少一个环节，画廊就错行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
