flex-basis比width更适合断点控制，因其参与flex空间分配计算，可配合flex-wrap: wrap自然换行；而width是静态尺寸，易撑破布局或触发横向滚动，且在含padding/border时难以精准预留间隙。
flex-basis 为什么比 width 更适合断点控制
因为 flex-basis 参与 flex 分配计算，而 width 是静态尺寸；当容器空间不足时，width 会强制撑破布局或触发横向滚动，flex-basis 则能配合 flex-wrap: wrap 自然换行。尤其在含 padding、border 的子项里，width: 33% 很容易让三栏总宽超 100%，但 flex-basis: calc(33.333% - 2rem) 能预留间隙余量。
三栏 → 两栏 → 单栏的 flex-basis 断点写法
关键不是改所有子项，而是按内容主次动态调整中间栏或侧边栏的 flex-basis：
- 默认三栏：左右栏设
flex: 0 0 240px（固定宽度），中间栏设flex: 1（等价于flex-basis: 0） - 768px 断点下两栏：把右侧栏
flex-basis改为100%，它就会独占一行下移，剩下左右两栏并排 - 640px 断点下单栏：全部子项统一设
flex-basis: 100%，再确保父容器有flex-wrap: wrap
注意：必须显式声明 flex-wrap: wrap，否则即使 flex-basis 设再小，子项也死扛着不换行。
常见错误：flex-basis 在媒体查询里失效的三个原因
flex-basis 不起作用，往往不是值写错了，而是被其他规则覆盖或前提缺失：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex——flex-basis只在 flex 容器中生效 - 漏了
flex-wrap: wrap—— 单行模式下flex-basis仅影响分配起点，不触发换行 - 子项含长文本且没设
min-width: 0—— flex 项目默认min-width: auto，会阻止压缩，导致换行失败
响应式断点该用 px 还是 em？
优先用 em，比如 @media (min-width: 40em)。因为 em 基于当前字体大小，能随用户缩放和可访问性设置自适应；而像素断点在高 DPI 屏或系统缩放下容易错位。另外，断点值别硬套“手机 768、平板 1024”，应按内容密度定：文字密集区可提前到 30em 就切两栏，图片主导区拖到 45em 再动。
