必须为所有选项卡元素设置box-sizing: border-box，否则border会额外增加宽度导致错乱；配合:not(:last-child)统一控制边框、预设透明边框或父容器留白，确保布局稳定。
Flex布局下border导致选项卡宽度错乱怎么办
直接加border会让flex: 1或width: 25%的选项卡实际变窄，因为边框会额外占用空间，而默认box-sizing是content-box。浏览器按“内容宽 + 左右border”算总宽，超出容器就换行或溢出。
解决办法只有一条：所有参与Flex排列的选项卡元素必须统一设box-sizing: border-box。否则哪怕只漏一个li或button，整排都会对不齐。
- 务必给每个选项卡项（如
<button>、<div class="tab">）加box-sizing: border-box - 不要只写在父容器上——父容器用
display: flex，子项才决定自身尺寸计算方式 - 可配合
* { box-sizing: border-box }全局重置，但注意第三方组件可能依赖content-box，需局部覆盖
用flex-grow和border做等宽带边框的选项卡
想让4个选项卡平分父容器宽度，且每项都有左右border（中间项共用边框），不能只靠flex: 1——那样每项会带独立左右边框，变成3条缝而不是2条缝。
正确做法是：去掉所有项的border-right，只给除最后一项外的元素加border-right；或者统一用border-left，首项不加。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
:not(:last-child) { border-right: 1px solid #ccc; }控制分隔线 - 若用
flex-grow: 1，要确保父容器flex-basis为0（即flex: 1 1 0），否则内容宽度会影响分配 - 避免同时设
width和flex-grow，后者会覆盖前者
选项卡激活态边框覆盖导致布局跳动怎么稳住
常见错误是给激活项加border-bottom: 2px solid blue，但未预留空间，导致整个选项卡栏高度突增，下方内容上跳。
根本解法不是用margin硬顶，而是用outline或透明边框占位：
- 初始状态设
border-bottom: 2px solid transparent，激活时改颜色——高度不变 - 或用
outline（不占布局空间），但注意outline无法做圆角、无法精确控制位置 - 若必须用实边框，可在父容器加
padding-bottom: 2px，把空间“预留下来”
移动端小屏下Flex选项卡横向滚动+边框对齐问题
当选项卡数量多、屏幕窄时，flex-wrap: nowrap配overflow-x: auto是常规方案，但border会让滚动条位置不准、首尾边框被截断。
关键点在于滚动容器的padding和子项border的配合：
- 滚动容器（如
.tabs-container）加padding: 0 8px，避免首尾项紧贴边缘被遮 - 子项用
border-left而非border-right，首项border-left: none，这样滚动到最左时不会漏边框 - 禁用
-webkit-overflow-scrolling: touch旧属性，它会导致边框渲染异常
边框在Flex里不是装饰，是布局变量。少设一个box-sizing，或漏掉一个:not(:last-child)，视觉就立刻露馅。
