用Flex实现带角标标签页平分排列，需让所有tab（含角标）作为同级flex item统一设flex:1，角标置于tab内部用absolute定位并预留padding空间，避免影响主轴分布。
用 Flex 实现带角标（徽标）的标签页平分排列，关键在于让所有 tab（含带角标的那一项）参与同一套弹性分配逻辑，而不是把角标当作“额外装饰”强行叠加。角标本身应作为 tab 内容的一部分，不影响 flex 项目本身的宽度计算和分布。
结构上：每个 tab 是一个独立 flex item
不要给角标单独设绝对定位或脱离文档流。正确做法是：
- 外层容器设 display: flex; justify-content: space-between; 或 flex: 1 配合 flex-wrap: nowrap;
- 每个 tab（包括带角标的那个）都是同级
<view></view>或<div>，统一设置 <strong>flex: 1;</strong> 或 <strong>flex-grow: 1;</strong> <li>角标（如小红点、数字气泡）放在 tab 内部，用相对定位 + 绝对定位微调位置，但不改变父 tab 的 flex 占比</li> <h3>样式上：角标不侵占主轴空间</h3> <p>角标需视觉突出但不能拉宽 tab 宽度。推荐写法：</p> <ul> <li>tab 文字区域用 <strong>position: relative;</strong> </li> <li>角标元素加 <strong>position: absolute; top: -6rpx; right: -6rpx;</strong>，并设固定宽高（如 <strong>width: 32rpx; height: 32rpx;</strong>）</li> <li>为避免角标溢出遮挡，可给 tab 加 <strong>padding-right: 40rpx;</strong>（留出角标空间），或用 <strong>box-sizing: border-box;</strong> 确保内边距不撑大 flex 基础尺寸</li> </ul> <h3>适配多端：注意 flex 分布的稳定性</h3> <p>在 H5 中，不同浏览器对 <code>flex: 1的解析略有差异，尤其当 tab 文字长度不一时。稳妥做法是：- 统一用 flex-basis: 0; + flex-grow: 1;，强制等分剩余空间
- 避免只依赖
text-align: center居中文字——应配合 display: flex; align-items: center; justify-content: center; 确保图标+文字整体居中 - 在移动端，为防止角标被软键盘顶起，底部 tab 容器建议用 position: sticky; bottom: 0; 而非
fixed，同时确保父容器有明确高度上下文
