flex-grow: 1 不生效的根本原因是默认 flex-basis: auto 按内容宽度计算初始尺寸，导致分配失衡；正确做法是设 flex-basis: 0 + flex-grow: 1 + white-space: nowrap，并清除硬编码 padding。
直接给导航项设 flex-grow: 1 不行，会撑爆容器或文字换行——关键在清掉默认 flex-basis 并控制收缩行为。
为什么 flex-grow: 1 不生效？
常见现象：导航项宽度不均、小屏下突然换行、鼠标悬停错位。根本原因是浏览器先按内容宽度（flex-basis: auto）计算基础尺寸，再分配剩余空间，导致“首页”和“关于我们”占位严重失衡。
- 默认
flex-basis: auto会让文字长度主导初始宽度，flex-grow失去作用 -
white-space: normal（默认）允许文字折行，进一步破坏等宽逻辑 - 父容器没设
min-width或用了固定padding（比如padding-left: 70px），压缩可用空间
正确写法：flex-basis: 0 + flex-grow: 1
强制所有导航项从零宽度起步，再按比例分剩余空间。这是真正实现“平铺”的最小必要配置。
- 给每个
<li>或<a></a>设flex-basis: 0（IE11 需写0%或0px） - 配合
flex-grow: 1，等宽均分；若需不等宽（如“首页”占 1 份，“产品中心”占 2 份），改用flex-grow: 1/flex-grow: 2 - 必须加
white-space: nowrap，防止文字撑开子项提前换行 - 删掉所有硬编码的
width或padding（尤其避免padding: 70px这类像素值）
容易被忽略的兼容性细节
IE11 和某些旧版 Safari 对 flex-basis: 0 解析不稳定，仅靠它不够。
- IE11 必须同时声明
width: 0和flex-basis: 0%，否则仍按内容宽度计算 - 主内容区若含长 URL 或未约束的
<pre class="brush:php;toolbar:false;"></pre>，需加min-width: 0，否则flex-grow被卡住 - 别用
calc(100% - 240px)给导航项算宽度——Flex 的空间分配和 CSS 计算值互不感知，缩放时必出缝隙 - 移动端横竖屏切换时，
flex-grow天然重算，但若用了display: none切换导航，动画会失效
真正卡住的从来不是 flex-grow 本身，而是你没意识到 flex-basis 和 white-space 这两个隐藏开关。删掉 padding 像素值、设 flex-basis: 0、锁死换行，三步做完，平铺就稳了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
