flex: 1在底部tab栏不撑满是因为它只对弹性容器的直接子元素生效，且父容器必须设display: flex和明确高度（如height: 100vh或100dvh），同时tab栏自身通常固定高度，应由其兄弟容器使用flex: 1占满剩余空间。
Flex布局中flex: 1为什么在底部Tab栏里不撑满？
因为flex: 1只对**弹性容器的直接子元素**生效，且前提是父容器设了display: flex和明确的高度约束。移动端Tab栏常嵌在body或路由容器里，如果父级没设height: 100vh或min-height: 100vh，flex: 1就“没地方可伸”。
- 检查父容器是否设置了
display: flex+flex-direction: column - 确保父容器有明确高度，比如
height: 100vh（注意：iOS Safari下100vh可能被地址栏压缩，可改用100dvh或JS补正） -
flex: 1写在Tab栏的**兄弟容器上**（比如内容区），不是Tab栏自己——Tab栏通常固定高度，靠margin-top: auto或align-self: flex-end推到底部
Tab栏水平居中用justify-content: center还是margin: 0 auto？
用justify-content: center，但必须确认它作用在正确的容器上：Tab栏本身是flex容器（内部按钮排布），而它的父容器才是负责整体水平居中的那个。
- Tab栏外层容器设
display: flex+justify-content: center，才能让整个Tab栏块居中 - Tab栏内按钮用
display: flex+justify-content: space-around或space-evenly做等距分布，别用text-align: center——那对inline元素有效，对flex子项无效 - 避免给Tab栏加
width: fit-content再配margin: 0 auto，这在某些Android WebView里会失效
iOS和Android底部Tab栏位置偏移的常见原因
不是Flex写错了，而是视口单位、安全区域或滚动行为干扰了布局计算。
- iOS Safari中
100vh不包含底部工具栏高度，导致Tab栏被顶出视口，优先用100dvh（需检查兼容性）或用env(safe-area-inset-bottom)留白 - Android Chrome在页面滚动后可能触发
position: fixed与flex混用时的重绘bug，Tab栏建议用position: sticky+bottom: 0替代fixed，并确保父容器有overflow: clip - 微信内置浏览器（X5内核）对
flex: 1支持不稳定，可降级为flex: 1 1 0或加min-height: 0防止子项溢出
用gap还是padding控制Tab按钮间距？
用gap，但得确认父容器是display: flex且子项是直系Flex项目——这是最干净、最不易被继承干扰的方式。
-
gap自动避开首尾，不用手动给第一个/最后一个按钮设margin - 避免在按钮上设
padding再用justify-content: space-between，容易因按钮文字长度不同导致视觉错位 - 老版本Android（如4.4 Webview）不支持
gap，可用margin+:not(:first-child)兜底，但要测试flex-wrap: wrap场景下是否异常
Flex做底部Tab栏真正难的不是语法，而是把“高度来源”“安全区域”“滚动上下文”“内核差异”这几层都串起来。漏掉任意一层，都会出现“明明代码没错，但就是不居中/不贴底”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
