flex-wrap: wrap 实现图片自动换行需父容器设 display: flex 和 flex-wrap: wrap，子项禁用固定宽/min-width/flex-shrink: 0；等宽用 flex: 1 1 calc() 配合媒体查询；图片用 width: 100%; height: auto 防失真；gap 优先使用，兼容性不足时用 padding+margin 抵消技巧。
flex-wrap 怎么让图片自动换行
图片墙宽度固定但图片数量多时，flex-wrap: wrap 是必须的。默认 flex-wrap: nowrap 会强行把所有图片挤在一行，溢出容器也不换行。
关键点在于：父容器要设 display: flex 和 flex-wrap: wrap，子项（图片或包裹图片的 width: 300px），否则换行逻辑会被破坏。
常见错误现象：flex-wrap 写了但不换行——大概率是子项用了 min-width 或 flex-shrink: 0 锁死了尺寸，或者父容器没设宽度限制（比如 width: 100% 或 max-width）。
flex-grow 如何让图片等宽自适应
flex-grow 本身不直接控制“等宽”，它决定剩余空间如何分配。想实现响应式等宽图片墙，更可靠的做法是结合 flex-basis + flex-grow: 1，而不是只靠 flex-grow。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.gallery-item {
flex: 1 1 calc(25% - 0.75rem); /* 4列，减去 gap 占用 */
}
@media (max-width: 768px) {
.gallery-item {
flex: 1 1 calc(50% - 0.5rem); /* 2列 */
}
}
@media (max-width: 480px) {
.gallery-item {
flex: 1 1 100%; /* 1列 */
}
}注意：calc() 里的 gap 值要对应 gap 设置，否则小屏幕下容易错位；flex: 1 1 ... 中第一个 1 是 flex-grow，第二个 1 是 flex-shrink，避免图片被压缩变形。
图片本身怎么不拉伸、不模糊
Flex 只管布局，图片失真通常来自 CSS 强制缩放。必须加约束：
-
img { width: 100%; height: auto; }—— 保证宽满父容器、高按比例缩放 - 避免给
img设固定height或object-fit: cover（除非你明确需要裁剪） - 如果父容器高度不确定，不要用
height: 100%，会导致图片被压扁
另外，object-fit 在旧版 Safari（iOS 13.3 之前）支持不全，纯响应式图片墙建议优先用 width: 100% + height: auto。
移动端间隙和对齐问题怎么调
gap 在 Flex 布局中很干净，但老浏览器（IE、旧版 Safari）不支持。如果需兼容，得用 margin 模拟，但要注意最后一行右侧 margin 多余的问题。
更稳妥的替代方案：
- 用
padding代替gap：父容器设padding: 0.5rem，子项设margin: 0.5rem，再用margin-left: -0.5rem; margin-top: -0.5rem抵消首行首列多余间距 - 或直接放弃等距间隙，用
text-align: center+inline-block回退（但这就不是 Flex 了）
实际项目里，gap 兼容性已足够好（Chrome 84+、Firefox 63+、Safari 14.1+），除非要支持 iOS 13 以下设备，否则别为兼容性牺牲布局清晰度。
真正容易被忽略的是：图片加载完成前的高度塌陷。如果图片没设 aspect-ratio 或占位 padding-top，Flex 容器可能先按 0 高渲染，导致换行错乱。加 aspect-ratio: 4/3 或最小高度兜底更稳。
