flex-basis本身不决定比例，真正起比例作用的是flex-grow；设flex-basis: 0才能让flex-grow按权重均分剩余空间，否则内容宽度、padding、border等会干扰初始尺寸，导致比例失真。
flex-basis 本身不直接实现“比例”，真正起比例作用的是 flex-grow；设 flex-basis: 0 才能让 flex-grow 按预期均分空间，否则文字长度、padding、border 都会干扰结果。
为什么 flex-basis: 20% 不等于“占 20% 宽度”？
百分比 flex-basis 是相对于父容器主轴尺寸计算的，但它的行为受多重因素干扰：
- 父容器若没显式
width（比如被position: absolute或未设viewport截断），flex-basis: 20%会退化为auto -
gap、padding、border不参与百分比计算，但占用真实空间 → 实际宽度 > 20%，容易溢出或换行 - 设了
flex-shrink: 1（默认），内容撑开后仍可能被压缩，破坏“比例感” - iOS Safari 旧版对
calc(20% - 8px)支持不稳定，建议拆解为flex-basis: 20%+margin
等宽导航链接：用 flex: 1 而不是 flex-basis: 20%
5 个导航项要均分容器宽度，别写 flex-basis: 20%，改用：
.nav-link {
flex: 1; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
white-space: nowrap;
}
.navbar {
display: flex;
gap: 16px;
}
这样做的好处：
- 所有项从“零宽度”起步，按增长因子瓜分剩余空间（已扣除
gap） - 无视文字长短、图标尺寸、内边距差异，天然抗干扰
- 小屏下自动收缩，不会因某项文字长就挤垮整体
- IE11 需写
flex-basis: 0%或0px（不能只写0）
不等宽导航：混合 flex-basis 和 flex-grow
如果“首页”想窄、“关于我们”想宽，不要靠文字长度控制，而是显式配比：
.nav-home { flex: 1; } /* 占 1 份 */
.nav-about { flex: 2; } /* 占 2 份 */
.nav-contact { flex: 1; }
或者固定某一项（如 logo）不参与弹性分配：
- 加
flex: 0 0 auto或flex: 0 0 120px，避免被压缩 - 其余项统一用
flex: 1，它们会平分“剩下”的空间 - 注意：混用
width和flex-basis会冲突 —— 浏览器优先按width计算，flex-grow可能失效
移动端折叠前就换行？检查 white-space 和 min-width
导航栏在中屏就折成两行，往往不是 flex-wrap 的问题，而是：
- 没设
white-space: nowrap→ 文字过长自动换行，撑开子项 - 父容器
min-width过小，或祖先节点用了transform/position: absolute，导致 flex 容器丢失宽度上下文 -
box-sizing没设成border-box，padding和border加在宽度外，悄悄撑破容器 - 真机调试时，先检查
<meta name="viewport">是否完整，常见拼错width=device-width成devide-width
最易被忽略的一点：flex-basis 的值是否真的被浏览器解析了？它不像 width 那样直观可见，出问题时往往静默回退到 auto，得靠 DevTools 的 computed 样式面板确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
