单独设flex-grow而不配flex-basis和flex-shrink，小屏下内容大概率被截断或强制换行；flex-basis决定初始占位（优先级高于width），flex-grow按比例分配剩余空间，flex-shrink按加权值分摊溢出，三者必须协同使用。
单独设 flex-grow 而不配 flex-basis 和 flex-shrink，小屏下内容大概率被截断或强制换行——这不是 bug，是计算逻辑必然结果。
flex-basis 决定“起点”，不是 width 的复制品
flex-basis 是浏览器分配剩余/溢出空间前的初始占位尺寸，它优先级高于 width：如果同时写了 width: 100px 和 flex-basis: 200px，最终按 200px 算。
-
flex-basis: auto（默认）→ 回退到width值；若width也没设，就由内容撑开 -
flex-basis: 0→ 初始占位为 0，把全部空间分配权交给flex-grow，适合“填空型”布局（如中间菜单栏） -
flex-basis: 30%→ 按容器当前宽度动态计算，响应式中比固定 px 更灵活 - 常见错误：用
width控制尺寸却忘了删flex-basis，结果尺寸被静默覆盖，调试时找不到原因
flex-grow 只分“剩下来的”，且按比例不是按像素
flex-grow 不是“让元素变宽到某个值”，而是把容器主轴上所有项目初始尺寸加起来之后剩下的空隙，按数值比值分掉。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 容器宽 600px，三个子项
flex-basis分别是 100px、150px、100px → 剩余空间 = 250px - 它们的
flex-grow是 1、2、0 → 总份数 = 3 → 每份 ≈ 83.33px - 结果：第一项得 83.33px，第二项得 166.67px，第三项得 0 → 最终宽度分别是 183.33px、316.67px、100px
- 关键陷阱：
flex-grow: 1在多个同级元素中看似“均分”，但只要某个元素flex-basis更大（比如 200px vs 100px），它最终宽度一定更大——因为起点高，分到的增量也落在更高基数上
flex-shrink 不是等比缩小，而是加权“扛压”
当所有项目的 flex-basis 总和超过容器宽度时，flex-shrink 才触发。它不是简单地按比例砍掉各自宽度，而是按 flex-basis × flex-shrink 加权后分摊溢出量。
立即学习“前端免费学习笔记（深入）”；
- 容器宽 400px，三个子项
flex-basis是 200px、150px、100px，flex-shrink是 1、2、0 → 总基准 = 450px，溢出 = 50px - 权重和 = 200×1 + 150×2 + 100×0 = 500
- 第一项收缩量 = (200×1)/500 × 50 = 20px → 最终宽 180px
- 第二项收缩量 = (150×2)/500 × 50 = 30px → 最终宽 120px
- 第三项
flex-shrink: 0→ 保持 100px，但若父容器没设overflow: hidden，它会直接撑破容器或拉出横向滚动条
真正难的不是套公式，而是在改 flex-grow 前，先确认 flex-basis 是否真实反映你想要的“初始占位”，以及 flex-shrink 是否在窄屏下会让关键内容被过度压缩甚至消失——这三者永远是一体动作，拆开调等于盲调。
