flex-basis设为百分比时列宽不按预期分配，因其是初始主轴尺寸，会受flex-grow和容器剩余空间影响；需用flex: 0 0 auto + width或flex: 1 1 200px等组合控制，并注意ie11兼容性与价格数字对齐问题。
Flex-basis设成百分比后列宽不按预期分配？
因为 flex-basis 是“初始主轴尺寸”，不是最终宽度；它会被 flex-grow 和容器剩余空间二次拉伸。比如三列都设 flex-basis: 33.33%，但容器有 padding 或子项有 border，实际可用空间不足，浏览器会重新分配——结果可能两列窄、一列宽。
- 用
flex: 0 0 auto+ 显式width更可控（适合固定列如“产品名”） - 价格列这类需弹性伸缩的，改用
flex: 1 1 200px（即 grow=1, shrink=1, basis=200px），让浏览器基于内容和剩余空间动态权衡 - 避免对所有列统一设
flex-basis: 33.33%，尤其当列内容长度差异大时，容易触发文字换行或溢出
移动端小屏下价格列被压缩到看不见数字？
这是 flex-shrink 默认为 1 导致的：浏览器优先缩小内容区保布局，价格数字直接被挤成“¥…”或换行错位。
- 给价格单元格加
flex-shrink: 0，禁止压缩，再配合white-space: nowrap防止断行 - 用媒体查询在
max-width: 480px时把表格改为垂直堆叠：flex-direction: column，每行变成「项目名 + 价格」组合块 - 别依赖
min-width硬撑——iOS Safari 对 flex 子项的min-width支持不稳定，优先用flex-basis+flex-shrink: 0
IE11里价格列完全错位或塌陷？
IE11 的 Flex 实现不支持 flex-basis: auto 在某些组合下（比如和 flex-wrap: wrap 共存），且对百分比 flex-basis 解析有偏差，常导致列宽归零。
- 必须写全
flex缩写，例如flex: 1 1 150px，不能只写flex-basis: 150px - 避免在 IE11 中使用
flex-basis: calc(33.33% - 1px)——它会直接忽略整个声明 - 给容器加
display: -ms-flexbox和对应前缀属性，但更稳妥的是为 IE11 单独提供一套display: table回退布局
价格数字右对齐但小数点没对齐？
单纯用 text-align: right 只能对齐末尾，不同价格位数（¥99 vs ¥1299.90）会导致小数点漂移，对比感弱。
- 用等宽字体 +
font-variant-numeric: tabular-nums，确保每个数字占相同宽度 - 包裹价格数字的
<span></span>加display: inline-block; width: 8em; text-align: right，固定宽度再右对齐 - 不要用空格或
实际做响应式价格表，最难的不是怎么让三列变两列，而是确保「¥」符号、小数点、负号这些字符在各种缩放、字体、DPI 下始终对齐。很多人卡在 Chrome 调好了，切到 Safari 就偏移，问题往往出在 font-variant-numeric 没开或者用了非等宽数字字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
