均分列的tab标签页切换栏需设父容器display: flex，子项用flex: 1 1 0和min-width: 0实现等宽拉伸，配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis截断长文本。
要让 Tab 标签页切换栏实现均分列（即每个标签宽度相等、填满容器），核心是用 Flex 布局的“零基础宽度 + 均匀拉伸”逻辑，而不是靠百分比或固定宽。
必须设父容器为 display: flex
Flex 属性只在弹性容器下生效。如果 .tabs 外层只是普通 <div>，没加 <code>display: flex 或 display: inline-flex，那里面所有 flex: 1 都不会起作用。
常见错误：多套了一层 wrapper，却忘了给 .tabs 自身设 display: flex。
推荐写法：
.tabs {
display: flex;
/* 可选：防文字撑高 */
align-items: stretch;
}
子项用 flex: 1 1 0 + min-width: 0
每个 .tab-item 要真正均分，得写成：
.tab-item {
flex: 1 1 0;
min-width: 0;
box-sizing: border-box;
}
-
flex: 1 1 0=flex-grow: 1（可放大）、flex-shrink: 1（可缩小）、flex-basis: 0（起始宽度为 0）
→ 这样浏览器才从“零”开始均分剩余空间，不受文字长度或默认 width 干扰。 -
min-width: 0是关键开关：防止子项因内容过长（比如超长链接）而拒绝收缩，导致溢出或横向滚动条。 -
box-sizing: border-box确保 padding 和 border 不额外增加总宽。
⚠️ 别用 width: 20% 或 flex-basis: 20% —— 容器宽度变化时会错位，也不响应式。
文字过长时做截断处理
均分后若某标签文字太长，默认会换行，撑高整个 tab 栏。如需单行+省略：
.tab-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意：这个组合必须和 min-width: 0 共存，否则 text-overflow 可能不生效。
不要试图用 justify-content: space-between 模拟均分
比如给 .tabs 设 width: 100% 再用 justify-content: space-between，看起来像等分，但：
- 实际是靠间隙“撑开”，标签自身宽度不一致；
- 缩放或窄屏下间隙突变，视觉不稳；
- 无法保证每个标签占确切 1/N 宽度。
真正的均分，只靠 flex: 1 1 0 配合弹性容器。
多行 Tab？一般不建议
flex-wrap: wrap 会让标签折行，破坏横向滚动和点击连续性。如真需要多行（极少见），就不能用 flex: 1，得改用：
.tab-item {
flex: 0 0 calc(100% / 5); /* 假设固定 5 个 */
}
但更推荐保持单行 + 横向滚动（见下文延伸）。
均分列的 Tab 切换栏，本质是“清空初始尺寸、交由 flex 统一分配”。只要父容器是 flex、子项设对 flex: 1 1 0 并守住 min-width: 0，就稳了。
