flex-basis 不能在媒体查询中单独修改，需用完整 flex 缩写声明；旧版 Safari 和 IE11 会忽略单独的 flex-basis，导致布局错乱。
flex-basis 不能在媒体查询里单独改宽度
直接结论：flex-basis 不是“列宽控制开关”，它只是主轴上的初始尺寸，浏览器后续还会按 flex-grow 和剩余空间二次分配。你在媒体查询里只写 flex-basis: 280px，旧版 Safari 和 IE11 会直接忽略——它们要求必须用完整 flex 缩写声明。
常见错误现象：
- 桌面端三列正常，小屏下突然两列挤一起、一列被拉宽
- 文字换行错乱，价格数字被截成“¥…”
- IE11 中整列塌陷为 0 高度（尤其搭配
flex-wrap: wrap时）
正确做法是：在断点中重写整个 flex 值，例如：
.plan {
flex: 1 1 280px; /* 桌面默认 */
}
@media (max-width: 768px) {
.plan {
flex: none; /* 禁用弹性，交由 width 控制 */
width: 100%;
}
}
为什么百分比 flex-basis 在小屏下特别容易失效
flex-basis: 33.33% 看似能均分，但实际受容器 padding、子项 border、gap 影响极大。比如三列总和本该 100%，但加上左右各 1rem padding 后，可用空间不足，浏览器只能压缩某些列——内容少的先被压扁，价格列反而撑开溢出。
更麻烦的是 iOS Safari：对 min-width + 百分比 flex-basis 组合支持极不稳定，缩放或换字体后列宽跳变。
替代方案：
- 固定列（如“产品名”）用
flex: 0 0 auto+ 显式width - 价格列这类需伸缩的，用
flex: 1 1 200px，给基础尺寸再留弹性空间 - 所有卡片加
min-width: 280px，比依赖flex-basis更直观可控
移动端堆叠时 flex-direction: column 不够用
只切 flex-direction: column 容易让“标题”“价格”“按钮”垂直错位——因为它们默认还是按 HTML 顺序填入，没做语义分组。结果就是小屏下“专业版”标题跑第二行，“¥199/月”卡在第三行，视觉断裂。
必须配合结构控制：
- 每张卡片内部用
display: flex; flex-direction: column; justify-content: space-between;拉开头尾，实现底部对齐 - 禁用
height: 100%，它在 Flex 容器里无意义，还可能触发 IE11 渲染 bug - 价格数字右对齐别只靠
text-align: right——小数点会漂移；改用display: inline-block; width: 8em; text-align: right或等宽字体 +font-variant-numeric: tabular-nums
IE11 兼容不是加前缀就能解决
IE11 的 Flex 实现不支持 flex-basis: auto 与 flex-wrap: wrap 共存，也不解析 calc() 表达式里的 flex-basis。你写了 flex-basis: calc(33.33% - 1px)，它直接当无效声明跳过。
真正兜底方式只有两个：
- 显式写全
flex缩写，例如flex: 1 1 150px，不省略任意参数 - 为 IE11 单独提供
display: table回退布局，或用@supports切换到 Flexbox 降级版本
最常被忽略的一点：别在同一个选择器里混写 display: flex 和 display: grid，后写的会覆盖前写的，调试时根本看不出问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
