Flex布局适合移动端TabBar，因其天然支持等宽（flex: 1）、居中（align-items: center）和底部固定（结合fixed或flex-column布局），并能自适应屏幕宽度与字体缩放，无需JS计算，兼容iOS Safari 9+和Android Chrome 40+。
Flex布局为什么适合移动端TabBar
因为TabBar需要等宽、居中、固定在底部，且要适配不同屏幕宽度和字体缩放。Flex的justify-content: space-around和flex: 1天然支持等分布局，不依赖固定像素或JS计算，比float或inline-block更鲁棒。
注意：iOS Safari 9+ 和 Android Chrome 40+ 都已稳定支持display: flex，但旧版UC或QQ浏览器可能有flex-wrap异常，建议加flex-wrap: nowrap显式声明。
HTML结构必须扁平，避免嵌套干扰
TabBar容器内直接放button或a，不要包div或span——每多一层嵌套，就多一个flex继承和min-width干扰源。
常见错误是这样写：
立即学习“前端免费学习笔记（深入）”；
<nav class="tabbar"> <div><a href="#home">首页</a></div> <div><a href="#search">搜索</a></div> </nav>
正确写法是：
<nav class="tabbar"> <a href="#home" class="tabbar-item">首页</a> <a href="#search" class="tabbar-item">搜索</a> <a href="#profile" class="tabbar-item">我的</a> </nav>
-
.tabbar设为display: flex，flex-direction: row -
.tabbar-item设flex: 1，并加text-align: center对齐文字 - 去掉所有
width、float、display: inline-block类
图标+文字垂直对齐要用align-items而非vertical-align
移动端TabBar常含SVG或字体图标，vertical-align: middle在Flex容器里无效，必须用Flex自身的对齐方式。
示例结构：
<a href="#home" class="tabbar-item"> <svg class="tabbar-icon"></svg> <span class="tabbar-label">首页</span> </a>
对应CSS：
-
.tabbar-item加display: flex+flex-direction: column+align-items: center -
.tabbar-icon设width: 24px、height: 24px（避免SVG默认撑满） -
.tabbar-label用font-size: 10px（iOS推荐最小可点击尺寸）
别忘了加touch-action: manipulation减少300ms延迟。
固定底部 + 安全区适配要分开处理
单纯position: fixed; bottom: 0在iPhone X及以上会遮挡Home Indicator。不能只靠env(safe-area-inset-bottom)——它只在启用了viewport meta的页面生效，且需配合padding-bottom而非bottom。
正确组合是：
.tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom);
background: #fff;
}同时确保HTML有：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
如果TabBar高度固定为50px，最终高度 = 50px + env(safe-area-inset-bottom)，所以容器内子项的height也要用calc(50px - env(safe-area-inset-bottom))微调，否则图标会下移。
这个细节容易被忽略：安全区变量只在真机或Safari模拟器里生效，Chrome DevTools的“Toggle device toolbar”不会渲染env()值。
