flex-basis 是解决 Flex 子项比例失效的关键，它明确弹性计算起点；设为 0 配合 flex-grow 可实现严格比例分配，比 width 更可靠，且需配合 min/max-width 防止异常。
用 flex-basis 统一定义子元素基础宽度，是解决 Flex 布局中子项比例“看似设了却没生效”的最直接办法。很多人误以为只靠 flex-grow 就能控制比例，结果发现元素宽度不按预期缩放——根本原因常是各子项的初始尺寸（比如内容撑开、默认 width、或浏览器默认 min-width）干扰了弹性计算。而 flex-basis 正是用来明确这个“起点”的。
为什么 flex-basis 比单纯设 width 更可靠
flex-basis 是 Flex 项目在主轴方向上的初始主尺寸，它参与弹性空间分配的计算起点；而普通 width 在 Flex 容器中可能被忽略或覆盖。尤其当子元素有文字、图片等固有尺寸时，width 很难压住，但 flex-basis 会强制作为伸缩前的基准。
- 设
flex-basis: 0+flex-grow: 1：彻底清空初始宽度，让所有子项完全按 grow 比例瓜分剩余空间（最常用、最可控） - 设
flex-basis: 200px+flex-grow: 2：先占 200px，再按权重分剩余空间 - 避免写
flex-basis: auto（默认值），它会尊重内容宽度，容易导致比例失真
典型场景：三栏等宽/不等宽布局一键对齐
比如一个导航栏需要左中右三块，比例为 1:2:1，且不希望文字长短影响宽度：
.nav {
display: flex;
}
.nav-item {
flex: 0 1 0; /* 等价于 flex-grow: 0; flex-shrink: 1; flex-basis: 0 */
}
.nav-item:first-child,
.nav-item:last-child {
flex: 1 1 0; /* grow=1, basis=0 */
}
.nav-item:nth-child(2) {
flex: 2 1 0; /* grow=2, basis=0 → 占比 2/(1+2+1) = 50% */
}这样无论中间项是“首页”还是“关于我们与联系我们”，宽度都严格按比例分配。
立即学习“前端免费学习笔记（深入）”；
配合 min-width/max-width 防止过度挤压或拉伸
flex-basis 控制起点，但最终宽度还受 min-width 和 max-width 约束。实际项目中建议加上合理限制：
- 卡片列表：设
flex-basis: 280px+min-width: 280px，保证小屏下也不换行、不失比例 - 表单字段：设
flex-basis: 0+min-width: 120px+max-width: 300px，兼顾弹性与可用性 - 切忌只设
flex: 1不管min-width，否则窄屏下文字可能溢出或重叠
常见误区：flex: 1 不等于 flex: 1 1 0
flex: 1 实际展开为 flex: 1 1 0%（注意是 0%，不是 0）。百分比值在某些旧浏览器或嵌套 Flex 中可能解析异常。更稳妥写法是显式声明：
- ✅ 推荐：
flex: 1 1 0或flex: 1 1 0px - ⚠️ 谨慎：
flex: 1（兼容性好但语义模糊） - ❌ 避免：
flex: 1 1 auto（又回到内容宽度干扰的老问题）
基本上就这些。flex-basis 不是万能，但它是把“比例控制权”从内容手里抢回来的关键开关。
