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-grow 如何让图片等宽自适应
本身不直接控制“等宽”，它决定剩余空间如何分配。想实现响应式等宽图片墙，更可靠的做法是结合
+
，而不是只靠
。
立即学习
“
前端免费学习笔记（深入）
”；
推荐写法：
注意：
里的 gap 值要对应
设置，否则小屏幕下容易错位；
中第一个
是
，第二个
是
，避免图片被压缩变形。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
图片本身怎么不拉伸、不模糊
Flex 只管布局，图片失真通常来自 CSS 强制缩放。必须加约束：
—— 保证宽满父容器、高按比例缩放
避免给
设固定
或
（除非你明确需要裁剪）
如果父容器高度不确定，不要用
，会导致图片被压扁
另外，
在旧版 Safari（iOS 13.3 之前）支持不全，纯响应式图片墙建议优先用
+
。
移动端间隙和对齐问题怎么调
在 Flex 布局中很干净，但老
浏览器
（IE、旧版 Safari）不支持。如果需兼容，得用
模拟，但要注意最后一行右侧 margin 多余的问题。
更稳妥的替代方案：
用
代替
：父容器设
，子项设
，再用
抵消首行首列多余间距
或直接放弃等距间隙，用
+
回退（但这就不是 Flex 了）
实际项目里，
兼容性已足够好（Chrome 84+、Firefox 63+、Safari 14.1+），除非要支持 iOS 13 以下设备，否则别为兼容性牺牲布局清晰度。
真正容易被忽略的是：图片加载完成前的高度塌陷。如果图片没设
或占位
，Flex 容器可能先按 0 高渲染，导致换行错乱。加
或最小高度兜底更稳。
flex-wrap: wrapflex-wrap: nowrapdisplay: flexflex-wrap: wrapwidth: 300pxflex-wrapmin-widthflex-shrink: 0width: 100%max-widthflex-growflex-basisflex-grow: 1flex-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()gapflex: 1 1 ...1flex-grow1flex-shrinkimg { width: 100%; height: auto; }imgheightobject-fit: coverheight: 100%object-fitwidth: 100%height: autogapmarginpaddinggappadding: 0.5remmargin: 0.5remmargin-left: -0.5rem; margin-top: -0.5remtext-align: centerinline-blockgapaspect-ratiopadding-topaspect-ratio: 4/3