flex-wrap: nowrap 本身不触发滚动，需配合 width/max-width、overflow-x: auto 和 flex-shrink: 0 才能实现图片横向滚动；移动端还需 touch-action: pan-x 等手势优化。
flex-wrap: nowrap 单独加了为什么图片还是换行？
因为 flex-wrap: nowrap 只是「禁止换行」，它不控制容器宽度、也不触发滚动——如果父容器没设 width 或 max-width，浏览器会默认让它无限撑宽，子项自然全挤在一行里“看不见溢出”，滚动条根本不会出现。
常见错误写法：.container { display: flex; flex-wrap: nowrap; } —— 这段 CSS 本身完全合法，但毫无滚动效果。
- 必须显式给容器加
width（如width: 100%）或max-width（如max-width: 600px） - 必须加
overflow-x: auto（只写overflow: auto在某些 Safari 版本下会误触垂直滚动） - 若子项是
<img alt="如何在CSS Flex中实现水平滚动的图片列表_设置flex-wrap:nowrap" >，记得加flex-shrink: 0，否则图片默认可压缩，可能被压扁甚至消失
图片列表滚动失效的三个典型现象
不是报错，而是你写了却“不动”的真实调试现场：
- 滚动条出现但拖不动：iOS Safari ≤15.6 需补
-webkit-overflow-scrolling: touch（iOS 16+ 已弃用但仍有存量设备） - 鼠标滚轮无效：父容器或某层祖先加了
touch-action: none或pointer-events: none，拦截了原生滚动事件 - 手指一滑页面就跟着上下动：缺
touch-action: pan-x，浏览器默认允许纵向滚动，横向拖拽时产生冲突回弹
子项用 <img alt="如何在CSS Flex中实现水平滚动的图片列表_设置flex-wrap:nowrap" > 还是用 <div> 包一层？
<p>直接用 <code><img alt="如何在CSS Flex中实现水平滚动的图片列表_设置flex-wrap:nowrap" > 更轻量，但要注意两点：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="如何在CSS Flex中实现水平滚动的图片列表_设置flex-wrap:nowrap" >默认display: inline，在flex容器里会受vertical-align影响，底部多出空白；加display: block或vertical-align: top消除 -
<img alt="如何在CSS Flex中实现水平滚动的图片列表_设置flex-wrap:nowrap" >默认可缩放（flex-shrink: 1），必须显式写flex-shrink: 0，否则图片在窄屏下会被压成一条线 - 如果要加 caption、hover 效果或响应式尺寸控制，用
<div class="card"> 包一层更可控，样式落在外层，<code>flex-shrink: 0和min-width也更好管理移动端滚动卡顿或没惯性，怎么调？
iOS Safari 对
overflow-x: auto的原生滚动优化很敏感，光靠 CSS 很难一步到位：- 必加
touch-action: pan-x到滚动容器上，这是现代写法，替代已废弃的-webkit-overflow-scrolling - 避免在滚动区域上监听
touchstart并调preventDefault()，除非你完全接管滚动逻辑（比如手写scrollLeft动画） - 慎用
will-change: transform，它可能让 iOS 渲染管线混乱，反而更卡；优先保证scroll-behavior: smooth+gap+ 合理min-width - 老设备兜底方案：外层
display: block; overflow-x: auto，内层再套一层display: flex; flex-wrap: nowrap; min-width: max-content
最易被忽略的是：滚动是否生效，和
flex-wrap: nowrap关系不大，真正卡点永远在容器尺寸约束、子项收缩行为、以及移动端手势权限这三处。写完先检查这三项，比反复调flex参数快得多。 - 必加
