flex容器实现横向滚动需设flex-wrap: nowrap、overflow-x: auto、明确宽度，子项加flex-shrink: 0和gap，移动端还需overscroll-behavior-x: contain与touch-action: pan-x。
flex容器必须设为 nowrap 且 overflow-x 可滚动
图片水平排列但超出容器时，默认会换行或压缩，必须显式禁止换行并启用横向滚动。关键不是只写 display: flex，而是组合控制行为：
-
flex-wrap: nowrap—— 强制所有子项挤在一行，不折行 -
overflow-x: auto（或scroll）—— 允许横向拖拽，注意要加scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }隐藏原生滚动条 - 容器需有明确宽度（如
width: 100%或固定值），否则 flex 容器可能收缩到内容宽，失去滚动意义
图片子项要用 flex-shrink: 0 防止被压缩
默认情况下，flex-shrink: 1 会让图片在空间不足时缩小，破坏画廊预期尺寸。尤其在移动端缩放或窗口变窄时，图片可能塌成一条细线。
- 给每个
<img>或包裹它的<figure></figure>加flex-shrink: 0 - 推荐同时设
min-width: 0（防止某些浏览器对图片的隐式最小宽限制干扰） - 若需等宽响应式图片，可用
flex: 0 0 auto+ 显式width，而非依赖flex: 1
移动端 touch 滚动体验差？得加 overscroll-behavior 和 touch-action
纯 CSS flex 画廊在 iOS/Android 上默认不支持惯性滚动，手指松开就停，还容易触发页面整体回弹。
- 容器加
overscroll-behavior-x: contain—— 阻止横向滚动穿透到 body - 加
touch-action: pan-x—— 告诉浏览器只响应水平拖拽，禁用双指缩放、竖向滚动等干扰行为 - 部分安卓 WebView 仍卡顿，可追加
-webkit-overflow-scrolling: touch（仅 Safari 有效，已逐步废弃但仍有兼容价值）
图片间距用 gap 最安全，别用 margin
用 margin-right 给每张图加间隔，最后一张会多出多余空白；用 padding 又难对齐首尾。CSS Grid 的 gap 在 flex 中同样可用（2021 年后主流浏览器均已支持）。
- 直接在 flex 容器上设
gap: 12px，间隙自动避开首尾，语义清晰 - 不兼容老浏览器（如 IE、旧版 Safari）时，改用伪元素或 wrapper 包裹每张图再设
margin-inline-end - 避免
justify-content: space-between配合 margin —— 容器宽度变化时，间隙会异常拉伸
.gallery {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 12px;
overscroll-behavior-x: contain;
touch-action: pan-x;
}
.gallery img {
flex-shrink: 0;
width: 240px;
height: 160px;
object-fit: cover;
}
gap 和 flex-shrink: 0 这两个点，上线前最容易漏掉，一漏就是整排图错位或缩成针尖。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
