flex布局做定价表需协同控制伸缩行为、断点策略与内容对齐；单独设flex-basis易致小屏塌陷或ie11失效，因其仅为主轴初始尺寸，非最终宽度，须配合flex缩写（如flex: 1 1 280px）并统一min-width、语义分组、等宽字体及伪元素插入符号。
Flex 布局做定价表，不是“设个 flex-basis 就完事”，而是要控制伸缩行为、断点策略和内容对齐三者配合；单独调 flex-basis 很容易在小屏下塌陷、换行或 IE11 全挂。
为什么直接写 flex-basis: 33.33% 在媒体查询里会失效
因为 flex-basis 是主轴上的初始尺寸，不是最终宽度。浏览器先按它分配空间，再根据 flex-grow/flex-shrink 和容器剩余空间二次拉伸或压缩。比如三列都设 flex-basis: 33.33%，但容器有 padding、子项有 border，实际可用空间不足，结果就是两列窄、一列被撑开——尤其小屏下更明显。
- 别在媒体查询里只改
flex-basis，必须连带写全flex缩写，例如flex: 1 1 280px - IE11 中
flex-basis: auto和flex-wrap: wrap组合常归零，必须显式写成flex: 1 1 280px - iOS Safari 对百分比
flex-basis+min-width支持不稳定，缩放后列宽跳变
移动端堆叠时只用 flex-direction: column 为什么还是错位
因为默认 HTML 顺序没做语义分组。小屏下“标题”“价格”“功能列表”“按钮”仍按源码顺序垂直排列，导致同一列的同类内容（比如所有“价格”）无法对齐。
- 给每张卡片加
display: flex; flex-direction: column; justify-content: space-between;，让内部标题和按钮自动拉开 - 卡片本身设
flex: none; width: 100%;，避免被 flex 拉伸干扰布局 - 关键：所有卡片统一加
min-width: 280px，比依赖flex-basis更直观可控 - 避免用
height: 100%，它在 Flex 容器中无意义，反而破坏等高逻辑
价格数字右对齐但小数点漂移？这不是 Flex 的问题
单纯 text-align: right 只对齐末尾字符，“¥99”和“¥1299.90”字符数不同，等比缩放时小数点必然错位。
- 用等宽字体 +
font-variant-numeric: tabular-nums，确保每个数字占相同宽度 - 或给价格数字包裹一层
display: inline-block; width: 8em; text-align: right; - “¥”符号统一用
::before伪元素插入，避免混入文本流影响对齐 - 绝对不要用空格、
padding-left或手动对齐——换设备/缩放立刻错乱
真正难的不是三列变一列，而是确保「¥」符号、小数点、负号这些字符在各种缩放、字体、DPI 下都稳定对齐；而这些细节，全靠排版控制，跟 flex-basis 没半毛钱关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
