flex容器需设flex-wrap: nowrap、明确宽度及overflow-x: auto才能横向滚动；white-space: nowrap仅作用于子项内文本，对flex布局无效。
flex容器设white-space: nowrap却没滚动？
根本原因是white-space: nowrap只对内联元素或文本生效，而display: flex容器的子项默认是块级弹性项，它不会自动“连成一行”并触发父容器溢出——必须配合overflow-x: auto和明确的宽度约束才有效。
常见错误现象：flex-direction: row + white-space: nowrap写了，但内容还是换行、不滚动。
- 父容器必须有明确的
width（比如width: 100%或max-width: 500px），否则它会无限撑宽，没有滚动触发条件 - 必须加
overflow-x: auto（不能只写overflow: auto，部分浏览器在flex下对overflow-y的处理会影响横向行为） -
white-space: nowrap通常加在子项上（如span文本），而非flex容器本身；容器上更关键的是flex-wrap: nowrap
子项不缩小：用flex-shrink: 0而非flex: 0 0 auto？
想让每个子项保持原始尺寸、不被压缩，核心是关掉flex-shrink。但flex: 0 0 auto和flex-shrink: 0效果不同：前者还重置了flex-grow和flex-basis，后者只控制收缩——更安全、意图更明确。
使用场景：卡片列表、图标导航、标签页等需要固定宽度/高度的横向滚动项。
- 推荐直接写
flex-shrink: 0，避免意外覆盖flex-basis（比如你本意是按内容宽，但flex: 0 0 auto在某些老浏览器里可能解析为flex-basis: 0） - 如果子项含图片或文字，记得给
min-width: 0（防文字溢出破坏布局），但别加在已设flex-shrink: 0的项上——它和flex-shrink: 0冲突，可能导致尺寸异常 - 移动端要注意：iOS Safari 对
flex-shrink: 0支持良好，但若子项用了width: 100%又没限制父容器，仍可能挤压
横向滚动条不显示？检查overflow和-webkit-overflow-scrolling
尤其在iOS Safari上，overflow-x: auto默认不显示滚动条，且惯性滚动失效，用户拖不动——这不是bug，是WebKit的默认策略。
错误现象：能滚动但没滚动条；手指一松就回弹；左右滑动卡顿。
- 必须加
-webkit-overflow-scrolling: touch（仅iOS Safari需要，现代Chrome/Firefox已不需要） - 滚动条样式需用
::-webkit-scrollbar系列伪元素，但注意它只在桌面WebKit有效；移动端无法自定义滚动条外观 - 别对flex容器设
height后又用overflow-y: hidden，这可能干扰横向滚动的触控响应区域
为什么flex-wrap: nowrap比white-space: nowrap更关键？
因为flex-wrap是Flexbox规范中控制主轴换行的正式属性，而white-space属于文本排版逻辑，对flex子项无直接作用。很多开发者误以为加了white-space: nowrap就能锁住行，其实它只影响子项内部文本是否折行。
性能影响：两者都无显著开销，但滥用white-space: nowrap在长文本子项中会导致水平溢出不可控，而flex-wrap: nowrap是声明式、可预测的行为。
- flex容器上只需
flex-wrap: nowrap（默认值，可省略），重点是确保子项不主动换行 - 如果子项是
div，它默认不换行；如果是p或span含长文本，才需要在子项上加white-space: nowrap防内部折行 - 别在容器上同时写
flex-wrap: nowrap和white-space: nowrap——后者多余，还可能误导后续维护者
真正卡住人的地方，往往不是flex属性本身，而是忘了给父容器设宽度、或者在子项上多加了一层不必要的width: 100%，导致flex计算错乱。滚动行为一旦出问题，优先查这俩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
