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>）外层最好包一层<div>，设flex: 0 0 auto，再给<img>设width: 100%+height: 100%+object-fit: cover - 避免对
<img>直接设max-width: 100%，它只限制宽度，高度仍可能失控 - 如果用
object-fit: contain，记得给父<div>设固定宽高比（比如aspect-ratio: 4/3），否则图片周围全是空隙
横向滑动相册最难调的其实是触屏下的滚动阻塞和图片加载闪动——这两处没处理好，用户第一感觉就是“卡”或“乱”。其他都是边角细节。
