tab等宽需设父容器display:flex，子项flex:1 1 0并配合min-width:0和box-sizing:border-box；禁用width/flex-basis百分比；justify-content:space-between不适用等分场景。
Tab 必须等宽填满容器，且不因文字长度或内边距错位——直接给子项设 flex: 1 1 0，同时确保父容器是 display: flex，否则所有 flex 行为都无效。
为什么只写 flex: 1 有时不管用
因为 flex: 1 是 flex: 1 1 0% 的简写，但 IE10–11 和部分 Safari 版本会把 0% 解析成 0px 并触发 bug，导致宽度计算异常。更稳妥的是显式写出完整三值：
-
flex: 1 1 0（注意是数字0，不是0%） - 必须配合
min-width: 0，防止长文本或图片强制撑开子项 - 所有 Tab 子项统一加
box-sizing: border-box，否则padding和border会额外增加总宽，造成溢出 - 别在子项上设
width、max-width或flex-basis百分比——它们会和flex: 1冲突，优先级更高
justify-content: space-between 不适合 Tab 等分
它只分配元素之间的间隙，首尾项紧贴容器边缘，不是“每个间隙都相等”。当 Tab 数量动态变化（比如隐藏某一项），视觉间距立刻失衡。真正需要的是“每个 Tab 占相同主轴空间”，而不是“间隙均分”。
- 如果误用
space-between，又没控制子项总宽，小屏下可能只剩一个 Tab，它会左对齐，完全失去“等分”意义 -
space-evenly虽然数学上更均匀，但 IE 完全不支持，Safari 12 前也不稳定，生产环境慎用 - 若必须用
justify-content类方案，请改用space-around+ 所有子项设flex: 0 0 auto，但这就放弃了等宽，仅适用于图标+短文字的轻量场景
响应式切换列数时 flex-basis 容易失效
用 flex-basis: 33.33% 想实现三列，结果在 Safari 或旧 Android WebView 中宽度忽大忽小——根本原因是 flex-basis 只是初始尺寸，后续仍会被 flex-grow 拉伸。
- 正确做法：用
flex: 0 0 33.33%显式禁用伸缩，再配合媒体查询切换 - 父容器必须有确定宽度（如
width: 100%），否则百分比无参照 - 移动端断点内加
flex-wrap: wrap，否则超出就横向溢出，不会自动换行 - 每行 Tab 数量固定时，推荐直接按数量写死
flex-basis：4 个就用flex: 0 0 25%，5 个就用flex: 0 0 20%
激活态样式覆盖后 Tab 宽度突然崩塌
给当前选中的 Tab 加 background 或 border-bottom 时，一不小心删掉了原有 flex 声明，该 Tab 就缩回内容宽度，其他 Tab 瞬间拉满剩余空间。
- 检查激活态规则是否完整继承了
flex: 1 1 0，不要只写新增样式 - 避免用
width或flex-basis单独覆盖某个 Tab，破坏整体比例 - 如果要用不同背景高度，统一加
height到所有 Tab 上，而不是只加在激活项 - 测试时手动在 DevTools 里临时删掉激活类，看布局是否恢复——这是最快速定位问题的方式
真正难处理的不是怎么写出来，而是当 Tab 含图标、徽标、动态文字截断、安全区适配（如 iPhone 底部手势条）时，min-width、box-sizing 和 flex-shrink 的微小差异会层层叠加，最终导致某台设备上刚好错位一个像素。建议在真机上验证，而不是只靠模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
