flex-basis设为百分比时tab宽度不按预期，因其仅为初始尺寸起点，需配合flex: 0 0 33.33%禁用伸缩、父容器设确定宽度、统一box-sizing并验证min-width与flex-wrap。
flex-basis设为百分比时，Tab项宽度为什么总不按预期？
因为flex-basis只是“起点”，不是最终宽度。浏览器先按百分比算出初始尺寸，再根据flex-grow和容器剩余空间二次分配——如果没禁用伸缩，哪怕写了flex-basis: 33.33%，三个Tab也可能被拉宽或压窄。尤其当Tab文字长度不一、有图标、或父容器带padding时，偏差更明显。
解决办法是切断后续伸缩干扰：
-
flex: 0 0 33.33%—— 明确禁用放大（grow）和缩小（shrink），只锚定基础宽度 - 必须确保父容器有确定宽度（如
width: 100%或具体像素），否则百分比失去参照 - 所有Tab项统一写法，避免混用
width和flex-basis，后者在Flex容器中优先级更高
如何让Tab在不同屏幕下自动切换列数（比如桌面4个、平板2个、手机1个）？
靠flex-basis配合媒体查询最稳，不用JS计算。关键点不在“切换”，而在“每次切换都重置伸缩行为”：
- 默认状态（手机）：
.tab { flex: 0 0 100%; } - 平板（≥768px）：
@media (min-width: 768px) { .tab { flex: 0 0 50%; } } - 桌面（≥1024px）：
@media (min-width: 1024px) { .tab { flex: 0 0 25%; } } - 父容器必须加
flex-wrap: wrap，否则超出就溢出而不是换行 - 若Tab内含文字或图标，建议加
min-width: 0防IE11或Safari旧版卡死最小内容宽
Tab文字过长导致换行或撑开容器？flex-basis怎么配合控制？
单纯设flex-basis: 25%挡不住文字溢出。真正起作用的是组合策略：
- 先用
flex: 0 0 25%锁住宽度基准 - 再加
white-space: nowrap阻止换行 - 配合
overflow: hidden+text-overflow: ellipsis截断过长文本 - 如果想保留可读性，改用
flex: 1 1 200px（允许弹性伸缩但设最小基线），比纯百分比更能适应内容波动 - 注意：iOS Safari对
min-width在Flex子项中的支持不稳定，优先靠flex-basis+flex-shrink: 0保底线
IE11里Tab布局完全错位，flex-basis百分比还能用吗？
能，但必须绕开它的解析缺陷。IE11不认flex-basis: 33.33%单独声明，也不稳定处理整数百分比（如33%）。
- 强制用三值
flex缩写：flex: 0 0 33.3%（小数点不能省，避免整除bug） - 若仍失效，退到固定像素：
flex: 0 0 240px+max-width: 100%防溢出 - 务必加
box-sizing: border-box全局统一，否则border和padding会让25% × 4 > 100% - 极端情况可为IE11提供
display: table回退，但日常项目中补全三值+小数已覆盖95%场景
flex: 0 0 25%，而是当Tab里塞进图标、徽标、动态数字、多语言文本时，那个25%是否还在所有设备、所有缩放、所有旧浏览器里守住边界——这需要把父容器宽度、box-sizing、min-width、flex-wrap全部拉通验证，缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
