Flex容器overflow-x: auto无效，因子项默认不收缩且flex-wrap: nowrap导致内容未溢出；需设固定宽度、flex-shrink: 0、配对overflow-y: hidden，并用各浏览器专属CSS隐藏滚动条。
Flex容器里加overflow-x: auto为什么没反应？
因为默认情况下，Flex子项不会主动收缩以适应容器宽度，flex-wrap: nowrap（默认值）下，所有子项会强行挤在一行，导致容器被撑宽，滚动条自然不出现。浏览器认为“内容没超出”，所以overflow-x: auto形同虚设。
- 必须给子项加
flex-shrink: 0，禁止压缩，否则图片会被压扁或截断 - 父容器要设固定宽度（比如
width: 100%或具体像素），且overflow-x: auto和overflow-y: hidden配对使用 - 别忘了加
scrollbar-width: none（Firefox）和-ms-overflow-style: none（IE/Edge旧版）隐藏原生滚动条
怎么让横向滚动更顺滑、支持触屏拖拽？
CSS滚动本身不带惯性，纯overflow-x: auto在移动端容易卡顿或无法拖拽。关键不是靠JS，而是启用原生滚动优化。
- 给滚动容器加
scroll-behavior: smooth只对scrollIntoView生效，横向滚动无效，别白加 - 真正起作用的是
-webkit-overflow-scrolling: touch（iOS Safari必需，但仅限于overflow设为auto或scroll的元素） - 现代方案：加
overscroll-behavior-x: contain防止滚动到头时触发页面回弹 - 如果用
transform: translateX()模拟滚动，就彻底失去原生滚动性能和惯性——除非你真需要自定义动效
隐藏滚动条但保留功能，各浏览器写法有啥差异？
不同引擎隐藏方式不同，漏掉任意一种，就会在对应浏览器里露出丑陋的滚动条。
- Chrome / Edge / 新版 Safari：
::-webkit-scrollbar { display: none; } - Firefox：
scrollbar-width: none（只认none或thin） - IE10+ / 旧Edge：
-ms-overflow-style: none - 注意：
::-webkit-scrollbar伪元素不能加在body或html上，必须作用于实际滚动容器本身
图片等比缩放又不溢出，object-fit和max-width怎么选？
相册里图片尺寸不一，直接设width: 100%会导致变形；用max-width又可能留白太多。核心是控制“单张图的显示边界”而非容器。
立即学习“前端免费学习笔记（深入）”；
- 子项（
<img alt="CSS如何利用Flex结合滚动条隐藏做出横向滑动相册" >）外层最好包一层<div>，设<code>flex: 0 0 auto，再给<img alt="CSS如何利用Flex结合滚动条隐藏做出横向滑动相册" >设width: 100%+height: 100%+object-fit: cover - 避免对
<img alt="CSS如何利用Flex结合滚动条隐藏做出横向滑动相册" >直接设max-width: 100%，它只限制宽度，高度仍可能失控 - 如果用
object-fit: contain，记得给父<div>设固定宽高比（比如<code>aspect-ratio: 4/3），否则图片周围全是空隙横向滑动相册最难调的其实是触屏下的滚动阻塞和图片加载闪动——这两处没处理好，用户第一感觉就是“卡”或“乱”。其他都是边角细节。
