flex-basis比width更优先，因为它是Flex布局空间分配的初始起点，浏览器先按flex-basis确定子项占位，再计算flex-grow/shrink；只要flex-basis非auto，width即被静默忽略。
flex-basis 为什么比 width 更优先？
因为 flex-basis 是 Flex 布局中空间分配的“起点”，浏览器在计算 flex-grow 和 flex-shrink 前，先按它确定每个子项初始占位。只要设了 flex-basis，width 就会被静默覆盖——哪怕你写了 width: 200px，但 flex-basis: 150px，最终就是 150px。
常见踩坑：调试时发现元素宽度不对，反复检查 width 却没意识到 flex-basis 已存在（尤其从框架或组件库继承样式时）。
-
flex-basis: auto（默认）→ 回退到width值；若没设width，就由内容撑开 -
flex-basis: 0→ 初始占位为 0，把全部空间分配权交给flex-grow，适合等分卡片、导航栏填空等场景 -
flex-basis: 30%→ 按容器当前宽度动态计算，响应式下比固定px更可靠
flex-basis: 0 和 flex-basis: auto 在等宽布局中效果完全不同
想让三个卡片并排均分父容器宽度，用 flex: 1 看似简单，但实际可能不等宽——因为默认是 flex: 1 1 auto，即 flex-basis: auto，文字多的卡片初始宽度更大，flex-grow 分到的增量也落在更高基数上。
真正可靠的写法是统一设 flex-basis: 0：
立即学习“前端免费学习笔记（深入）”；
.item { flex: 1 0 0; }
这等价于 flex-grow: 1; flex-shrink: 0; flex-basis: 0，所有子项从 0 开始均分剩余空间，结果严格按比例分配。
- 用
flex: 1→ 实际是flex: 1 1 0%，多数情况可用，但要注意flex-shrink: 1在窄屏下可能压缩内容 - 用
flex: auto→ 实际是flex: 1 1 auto，内容宽度影响起点，不适合等宽需求 - 显式写
flex-basis: 0能避免歧义，尤其多人协作或维护旧项目时
百分比 flex-basis 在 flex-wrap: wrap 下容易错位
当容器设了 flex-wrap: wrap，又给子项设 flex-basis: 50%，看似能实现两列布局，但实际常因 margin、gap 或四舍五入导致换行异常——比如本该一行两个，结果第二个被挤到下一行。
更稳的做法不是靠百分比占位，而是用 flex: 0 0 50%（即禁用伸缩，只设基准）配合 box-sizing: border-box，并确保父容器没有 padding 干扰计算。
- 避免同时用
width和flex-basis，二者冲突且难调试 - 如果列数需响应式变化（如小屏一列、中屏两列），优先考虑
display: grid，Flex 在这种场景下兼容性和可预测性不如 Grid - 临时补救：加
min-width: 0防止内容溢出撑宽，尤其含长单词或 URL 的文本项
flex-basis 与 min-width / max-width 的协作关系
flex-basis 是分配前的“理论尺寸”，而 min-width 和 max-width 是最终渲染的“物理边界”。三者共存时，浏览器先按 flex-basis 计算，再用 min/max 截断结果。
例如：flex-basis: 200px; flex-grow: 1; min-width: 300px; —— 即使剩余空间很少，该元素也不会小于 300px，flex-grow 的分配结果会被 min-width 顶上去，可能挤占其他子项空间。
- 卡片类布局常用
flex-basis: 0; min-width: 300px;：保证最小宽度，又允许在宽屏下弹性拉伸 -
max-width可防止子项在大屏下过宽，但注意它不影响flex-shrink的收缩逻辑 - 慎用
flex-basis+width+min-width三者混用，容易出现意料外的截断或溢出
flex-grow 前，务必确认 flex-basis 是否真实表达了你想要的“初始占位”——否则后续所有分配都是在错误基线上运算。 
