flex-basis是剩余空间计算的起点，非width替身；它参与“容器宽度−所有项目flex-basis总和”运算，正数触发flex-grow，负数触发flex-shrink，width仅在flex-basis: auto时作后备。
flex-basis 是剩余空间计算的起点，不是 width 的替身
它直接参与「容器宽度 − 所有项目 flex-basis 总和」这个关键差值运算。这个差值决定有没有剩余空间可分配——正数触发 flex-grow，负数触发 flex-shrink。很多人误以为设了 width: 100px 就等于占了 100px 空间，但只要写了 flex-basis: 200px，浏览器就无视 width，直接拿 200px 去算总和。
常见错误现象：
- 明明写了
width: 50%，却在小屏上整行撑开 → 实际是flex-basis: auto拿到了内容宽度（比如长文本），远超 50% - 三栏布局本该等宽，但其中一栏莫名窄了一半 → 某个项漏写了
flex-basis，默认auto导致它按内容算，挤占了其他项的 grow 空间
flex-basis: 0 和 flex-basis: auto 的行为差异极大
flex-basis: 0 表示“从零开始分配”，flex-grow 分的是纯容器宽度；而 flex-basis: auto 会先取 width（如有）或内容宽度（max-content），再用容器宽度减去这个值——结果可能很小甚至为负。
典型场景：
- 三栏等宽：用
flex: 1实际是flex: 1 1 0%，flex-basis: 0%让三项都从零起步，均分容器宽度 - 头像+昵称+按钮：头像设
flex-basis: 40px锁定尺寸；昵称用flex-basis: 120px; flex-grow: 1，既保底又可伸；按钮用flex-basis: auto; flex-shrink: 0防压缩 - 文字溢出风险：
flex-basis: content虽语义清晰，但 iOS Safari ≤15.6 不支持，稳妥做法是flex-basis: auto+ 显式min-width
flex-basis 百分比值依赖父容器宽度，且受 min-width 干预
flex-basis: 33.33% 看似能三等分，但它基于容器当前宽度计算，而容器宽度可能被 min-width 或 max-width 截断。更麻烦的是，min-width 优先级高于 flex-basis，一旦触发，实际尺寸就不再是百分比值。
容易踩的坑：
- 容器设了
min-width: 320px，但子项flex-basis: 50%→ 在 320px 宽度下，flex-basis实际是 160px；若容器被拉宽到 600px，它才变成 300px - 在
flex-direction: column下，flex-basis控制的是高度，此时height会被覆盖，但min-height仍有效 -
flex-basis为百分比时，如果父容器没有明确宽度（比如未设width或未被其他约束），计算结果可能为 0，导致flex-grow分配异常
flex-grow 分配的是「差值」，不是「容器宽度」
很多人以为 flex-grow: 1 就是“占满剩余空间”，其实它分的是「容器宽度 − 所有 flex-basis 总和」这个差值。如果三个项分别设 flex-basis: 100px、200px、300px，容器宽 700px，那剩余空间只有 100px，哪怕 flex-grow 都设成 10，也只分这 100px。
实操建议：
- 调试时先注释掉
flex-grow和flex-shrink，只看flex-basis下各项目原始排布，确认总和是否合理 - 用浏览器开发者工具检查 computed 样式里的
flex-basis值，注意它是否被auto解析为内容宽度，而非你写的width - 移动端慎用
flex-basis: 100%—— 容器若没设宽度，它可能算成 0，导致项目塌缩
flex-basis 如何把「视觉尺寸」和「空间分配逻辑」拆成两件事。它不渲染，只算账；你看到的宽度，是算账结果，不是你写的值。
