使用 flex: 1 属性配合 display: flex 容器，可以让子元素自动等分父容器宽度。只需将 tab 栏容器设为 flex 布局，并为每个 tab 项应用 flex: 1，即可实现移动端屏幕上的完美等分切换效果。
如何设置容器与子元素的 Flex 属性
在 CSS 中，通过给父容器添加 display: flex 激活弹性布局，再给子元素设置 flex: 1 或 flex-grow: 1，即可让所有子元素平分可用空间。这种方法不依赖固定像素或百分比，能自适应不同宽度的移动设备屏幕。
.tab-container {
display: flex;
}
.tab-item {
flex: 1;
text-align: center;
padding: 10px;
}上述代码中，.tab-container 是 Flex 容器，.tab-item 是子项。flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，确保子项在空间不足时也能均匀压缩，避免溢出。
立即学习“前端免费学习笔记（深入）”；
如何处理选中状态与交互样式
在等分基础上，通常需要根据当前选中的 Tab 改变样式，如背景色、字体颜色或底部边框。可以通过 JavaScript 动态切换类名，或在 CSS 中使用伪类结合 :hover 和 :active 提供反馈。实际开发中，推荐使用 JS 控制 class 切换，以便更灵活地管理状态。
.tab-item.active {
color: #ff6600;
border-bottom: 2px solid #ff6600;
}当用户点击某个 Tab 时，JS 移除其他项的 active 类，并给当前项添加该类。这样既保持了视觉一致性，又提升了用户体验。注意不要在内联样式中硬编码颜色值，应统一使用 CSS 变量或类名管理主题。
基于输入条件如何验证等分效果是否生效
要验证 flex: 1 是否真正生效，可以检查浏览器开发者工具中各子元素的 computed width 是否相等。若不等，可能是由于子元素内部内容导致 flex-basis 被覆盖，或存在 white-space: nowrap 等限制。此时可显式设置 flex-basis: 0 强制从零开始分配空间，确保完全等分。
