flex-basis 不能在断点处切换宽度，仅是主轴初始尺寸；断点列宽需靠媒体查询重写 flex 缩写或改用 grid，否则易塌陷、换行、ie11 失效。
直接说结论：flex-basis 本身不能“在断点处切换宽度”，它只是初始尺寸；真正在断点切换列宽，得靠媒体查询配合 flex 属性重写，或改用 grid。盲目只调 flex-basis 常导致列宽塌陷、文字换行、IE11 全挂。
为什么 flex-basis 在媒体查询里设百分比经常失效
flex-basis 是“主轴上的初始尺寸”，不是最终宽度。浏览器会先按 flex-basis 分配空间，再根据 flex-grow/shrink 和容器剩余空间二次拉伸或压缩。比如三列都写 flex-basis: 33.33%，但容器有 padding、子项有 border，实际可用空间不足，结果就是两列窄、一列被撑开——尤其小屏下更明显。
- 别在媒体查询里单独改
flex-basis，必须连带写全flex缩写（如flex: 1 1 280px），否则旧版 Safari 和 IE11 会忽略 -
flex-basis: auto在 IE11 +flex-wrap: wrap组合下常归零，必须显式写成flex: 1 1 280px - 百分比
flex-basis在 iOS Safari 中对 min-width 支持不稳定，换字体或缩放后列宽跳变
正确做法：用媒体查询重置整个 flex 行为
桌面端三列等宽、移动端单列堆叠，关键不是“调 flex-basis”，而是控制每张卡片的 flex 占比和容器的 flex-wrap 策略。
- 默认（桌面）：
.pricing-grid { display: flex; flex-wrap: wrap; }+ 每张卡片flex: 1 1 300px - 768px 下：
@media (max-width: 768px) { .pricing-grid { flex-direction: column; } .plan { flex: none; width: 100%; margin-bottom: 1rem; } - 避免用
flex: 1单独声明——它等价于flex: 1 1 0，初始宽度为 0，小屏下极易压扁 - 给卡片加
min-width: 280px而非依赖 flex-basis，更直观可控
价格数字右对齐但小数点漂移？这不是 flex-basis 的问题，是排版没做对
单纯 text-align: right 对不齐小数点，因为 “¥99” 和 “¥1299.90” 字符数不同，等比缩放时位移不可控。
- 强制等宽数字：用
font-variant-numeric: tabular-nums+ 等宽字体（如font-family: 'SF Mono', Consolas, monospace） - 或包裹价格数字的容器加
display: inline-block; width: 8em; text-align: right，固定宽度再右对齐 - 绝对不要用空格、
padding-left对齐——换设备/缩放立刻错乱 - “¥”符号统一用
::before伪元素插入，避免混入文本流影响对齐
IE11 兼容性兜底必须单独处理
IE11 的 Flex 实现对 flex-basis: calc()、flex-basis: auto、flex-wrap 都有偏差，光靠前缀不够。
- 必须写全
flex缩写：-ms-flex: 1 1 280px，不能只写-ms-flex-basis: 280px - 禁用
flex-basis: calc(33.33% - 1px)—— IE11 直接丢弃整条声明 - 更稳妥的是用
@supports not (display: grid)回退到display: table布局，或干脆用 JS 检测后加载独立样式表 - 所有卡片高度不一致？IE11 不支持
align-items: stretch在某些嵌套场景，显式加height: 100%反而更稳
真正难的不是让三列变一列，而是确保“¥”、“.”、“−”这些符号在各种 DPI、缩放、字体渲染引擎下始终对齐——这得靠字体特性+固定宽度容器+语义化标记三者咬死，flex-basis 只是其中最表层的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
