flex-wrap: wrap 是换行的硬性前提，不加则子元素强制单行排列、可能挤压或溢出；justify-content 不影响换行，必须显式声明 flex-wrap: wrap 才能实现多行布局。
flex-wrap: wrap 是换行的硬性前提
不加 flex-wrap: wrap，所有图片一定死扛一行——哪怕容器只有 320px 宽，浏览器也照压不误，要么挤成细线，要么触发横向滚动。这不是 bug，是 flex-wrap: nowrap 的默认行为。
常见错误：只写 display: flex 就以为完事；或指望 justify-content 拉开间距来“诱导”换行，它只管对齐，不管折行。
- 必须显式声明
flex-wrap: wrap，缺一不可 - 旧版 Safari 在
display: inline-flex容器里对flex-wrap支持不稳定，外层统一用display: flex - 父容器自身要有明确宽度（如
width: 100%），否则子项百分比无参照基准
用 calc() 算准单图宽度，别靠 flex-basis 猜
flex-basis: 25% 不等于“一定能排四列”。只要子项带 padding、margin 或 border，25% + 两边间距就可能超 100%，导致单行只排 3 个甚至 2 个——你看到“第三张后就换行”，根源在这儿。
推荐用 width: calc((100% - 3vmin) / 4) 这类写法，语义清晰：4 列 → 3 个间隙 → 总间隙 3vmin，均摊到每项。
- 优先用
gap控制间距，不用margin；若必须用margin，改写为flex-basis: calc(25% - 8px)（假设左右各 4px） - 所有图片项加
box-sizing: border-box，让 padding/border 不撑出宽度 - 父容器别设左右
padding，它会压缩主轴可用空间；如需内边距，改用padding-top/padding-bottom
防抖动和等比缩放，得从尺寸预留入手
原生 <img> 加载前无尺寸，Flex 容器高度塌陷，造成布局抖动甚至错行——这不是 CSS 写错了，是加载机制问题。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
现代方案：给图片父容器（如 <figure></figure>）加 aspect-ratio: 16/9（Chrome 103+ / Firefox 98+ / Safari 16.4+）；兼容方案用伪元素撑高：::before { content: ""; display: block; padding-top: 56.25%; }。
- 避免对
<img>直接设height: 100%且父容器没高度，图片会拉伸变形或空白 - 服务端若能输出
width和height属性，浏览器可提前预留空间，比 CSS 更准 - IE11 下
flex-basis: 25%大概率失效，必须降级三值写法：flex: 0 0 24.9%+width: 25%fallback
最后一行别被 flex: 1 拉垮
flex: 1 1 200px 这类写法会让最后一行子项抢占剩余空间，强行拉高，破坏画廊整齐感——这就是“底行膨胀”问题。
正确做法是禁用弹性伸缩：用 flex: 0 0 auto 或直接 width + calc() 控制，再配合 height: auto 和 aspect-ratio 保比例。
- 移除
.gallery img { flex: 1 }类似声明，改用块级宽度控制 - 设
justify-content: flex-start，避免居中导致末行空隙过大 - 图片用
object-fit: cover裁剪时，确保父容器有明确高度或aspect-ratio，否则裁剪无效
实际调试时，gap 值和 calc() 中的间隙分摊方式最容易被忽略——它不是简单减一个 gap，而是按 (n−1)/n 比例均摊，稍算错一点，整行就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
