Flex 无法实现选中项自动居中，因 justify-content: center 是静态整体居中，不响应运行时状态；必须用 JavaScript 调用 scrollIntoView 配合 flex-wrap: nowrap 和 overflow-x: auto 实现滚动定位。
Flex 本身不提供“选中项自动居中”能力，justify-content: center 是让所有子项整体居中，不是把某个动态选中的子项推到容器正中央。真要实现「当前激活的 Tab 水平居中显示，其他项左右排列」，得靠 JavaScript 配合 Flex 的 scrollIntoView 或手动计算偏移，纯 CSS 做不到。
为什么 justify-content: center 不适用于 Tab 选中居中
justify-content: center 作用于整个 flex 容器的主轴，它把所有子元素作为一个整体水平居中对齐——就像把一排按钮放在盒子中间，但不会因为其中某一个被点击，就让它“跳”到盒子正中心。Tab 标签页需要的是「滚动定位 + 视觉聚焦」，不是静态布局对齐。
- 选中态是运行时状态，CSS 无状态感知能力（
:focus-within或[aria-selected="true"]可样式响应，但无法触发重排或滚动） -
justify-content和align-items都不支持“仅对某个子元素生效” - 如果强行用
margin: auto给选中项加，会破坏原有流式布局，导致其他 Tab 错位或换行
实际可行方案：scrollIntoView + Flex 容器
保持 Flex 布局结构，用 JS 在 Tab 切换时调用 scrollIntoView，让选中项进入可视区中央。关键点在于容器需启用横向滚动、禁用换行，并设置合适的 scroll-behavior：
- 父容器设
display: flex; flex-wrap: nowrap; overflow-x: auto; - 加
scroll-behavior: smooth;让滚动更自然 - 给选中
或添加scrollIntoView({ block: 'nearest', inline: 'center' }) - 避免在移动端触发双击缩放，可加
-webkit-overflow-scrolling: touch;
示例关键 CSS：
.tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.tab-item {
flex: 0 0 auto; /* 防止压缩 */
padding: 8px 16px;
}
容易忽略的兼容性与体验坑
不是所有浏览器都支持 scrollIntoView({ inline: 'center' }) 的完整行为，尤其旧版 Safari 和部分安卓 WebView：
- Android 4.4–6.0 的 WebView 不支持
inline选项，会退化为start - 若容器宽度未明确（比如只设
width: 100%但父级无宽），scrollIntoView可能计算错误 - 快速连续点击多个 Tab 时，未加节流会导致滚动队列堆积，视觉卡顿
- 无障碍方面，需同步更新
aria-selected="true"和tabindex="0"，否则键盘用户无法聚焦到新选中项
真正要“自动居中”，核心不在 Flex 的对齐属性，而在滚动定位逻辑。Flex 只负责提供可滚动的弹性容器基础，剩下的得交由 JS 控制——这也是为什么几乎所有成熟 UI 库（如 Ant Design、Element Plus）的 Tab 组件，内部都依赖 scrollIntoView 或自定义 offset 计算，而非纯 CSS 技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
