tab容器必须设为display: flex，否则flex: 1无效；子项需设flex: 1 1 0并配合min-width: 0、box-sizing: border-box，清除width/padding干扰，才能真正均分宽度。
Tab容器必须设为 display: flex
Flex布局实现等分排列的前提是父容器启用弹性布局。只给子项（如 .tab-item）加 flex: 1 是无效的，父容器没设 display: flex 或 display: inline-flex，所有 flex 相关属性都不起作用。
常见错误：在 Tab 标签外层用了 div 包裹但忘记设 display: flex，结果子项依然按块级元素堆叠，宽度也不均分。
- 推荐写法：
.tabs { display: flex; } - 若需换行（极少数多行 Tab 场景），加
flex-wrap: wrap，但此时flex: 1会失效，需改用flex-basis: calc(100% / N)配合flex-grow: 0 - 注意：不要对容器设
width: 100%后再用justify-content: space-between试图“模拟”等分——这会导致间隙不均、缩放异常
flex: 1 是最简等分方案，但要注意边界行为
当所有 Tab 子项都设 flex: 1（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0），它们会均分容器剩余空间。这个 0 的 flex-basis 很关键——它清空了子项自身宽度的影响，让分配真正“从零开始”均分。
容易踩的坑：
- 如果某个 Tab 文字过长且未设
white-space: nowrap，内容换行会撑高容器，但宽度仍等分；若想强制单行+省略，得额外加overflow: hidden; text-overflow: ellipsis - 若子项含内边距或 border，
flex: 1分配的是 content box 宽度，padding/border 会额外增加总宽，导致溢出。解决方案：给子项统一加box-sizing: border-box - IE10–11 对
flex: 1支持有 bug，建议显式写成flex: 1 1 0提升兼容性
选中态样式覆盖时，别误删 flex 属性
给当前激活的 Tab 加背景色、下划线或边框时，常有人直接重写整个样式规则，一不小心把 flex: 1 覆盖掉了。结果就是该 Tab 缩回内容宽度，其他 Tab 瞬间拉伸占满剩余空间，视觉错乱。
安全做法：
- 用独立 class 控制状态，例如
.tab-item.active，只覆盖颜色、border-bottom 等外观属性，不碰flex相关声明 - 如果要用
transform: scale()或position: relative做动效，确保这些属性不影响 flex 布局流（它们本身就不影响） - 避免在
.active里写width: auto或flex: none—— 这等于主动退出 flex 分配
响应式断点下，等分逻辑可能需要切换
小屏设备（比如手机）上，等分会导致每个 Tab 过窄、文字挤压。这时不应硬撑 flex: 1，而应改用滚动容器或折叠菜单。
实操建议：
- 用媒体查询在
max-width: 480px下关闭 flex 等分：.tabs { display: block; }，子项恢复display: inline-block或用overflow-x: auto滚动 - 不要依赖
flex-wrap: wrap自动折行——折行后每行数量不确定，无法保证“每行等分”，反而更难控制 - 如果必须保持等分，可配合 JS 动态计算列数并设
flex-basis: calc(100% / N)，但 CSS-only 方案更轻量、更可靠
等分不是目的，可用性才是。Flex 实现 Tab 等分看似简单，但 padding、box-sizing、响应式切换、状态样式这几个点漏掉任何一个，都会让页面在真实设备上出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
