Flex布局下TabBar容器必须设为display: flex；需显式声明flex-direction: row，子项用flex: 1（等价于flex: 1 1 0%）实现等宽均分；iOS需用env(safe-area-inset-bottom)适配底部安全区，并配合viewport-fit=cover；语义化使用button或a标签，确保可访问性。
Flex布局下TabBar容器必须设为display: flex
移动端TabBar通常是一行固定高度的导航栏，要求图标+文字等宽均分、水平居中、无间隙。只给子项设flex: 1是不够的——父容器没开启Flex上下文，所有flex属性都会被忽略。
常见错误是只写了子元素样式，忘了给.tabbar本身加display: flex。另外，务必显式设置flex-direction: row（虽然默认值就是它，但部分旧版Android WebView会出问题）。
.tabbar { display: flex; flex-direction: row; }- 避免用
width: 100%或max-width干扰主轴计算，让Flex自己算宽度 - 若TabBar有背景色或边框，建议用
box-sizing: border-box防止溢出
每个Tab项用flex: 1而非flex: 1 1 0
想均分，最简方式是统一设flex: 1，它等价于flex: 1 1 0%。这里的关键是第三个参数为0%，表示“不按内容撑开，完全由Flex分配空间”。
如果误写成flex: 1 1 auto或漏掉第三个值（浏览器会补为auto），在文字长度不一时，项宽就会不一致——比如“首页”和“我的订单”字数差太多，后者会明显更宽。
立即学习“前端免费学习笔记（深入）”；
- 正确：
.tabbar-item { flex: 1; } - 错误：
.tabbar-item { flex: 1 1 auto; }或.tabbar-item { flex: 1 1; } - 不需要额外设
min-width，Flex已保证最小宽度为0，均分逻辑不受影响
处理iOS Safari底部安全区导致的遮挡
iPhone X及后续机型有底部Home Indicator区域，如果TabBar紧贴视口底部，可能被系统手势条遮住。不能靠padding-bottom硬顶，那样在非刘海屏上会多出空白。
要用CSS环境变量env(safe-area-inset-bottom)动态适配：
.tabbar {
padding-bottom: env(safe-area-inset-bottom);
/* 同时加个fallback，兼容不支持env的旧浏览器 */
padding-bottom: 16px;
}- 必须配合
viewportmeta 中的viewport-fit=cover才生效：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 仅当TabBar固定定位（
position: fixed; bottom: 0）时才需要这个处理 - 别用
calc(100vh - env(...))去算高度，容易引发iOS Safari渲染抖动
点击反馈与可访问性容易被忽略
纯Flex排版后，Tab项常被写成<div>，但这会导致无法键盘聚焦、屏幕阅读器不可读、无原生点击波纹。不是“能点就行”，而是“点得对”。
- 语义化优先：用
<a href="#home">或<button type="button">包裹内容 - 移除默认焦点环（如
outline: none）前，必须提供替代视觉反馈，比如:active { background-color: #f5f5f5; } - 为图标加
aria-hidden="true"，文字加aria-label（如aria-label="首页"），避免重复朗读 - 在微信内置浏览器中，
button比a更稳定触发click事件
Flex均分本身很简单，难的是在真实设备上不被截断、不被遮挡、不破坏可访问性。尤其是env(safe-area-inset-bottom)和语义化标签这两处，上线后才发现问题，就只能发版修复了。
