flex: 1 1 0% 解析为 flex-basis: 0%，参与剩余空间计算，但会抹除内容宽度兜底导致截断；需用 flex: 1 0 0 或 auto 配合 min-width: 0 和 box-sizing: border-box 保障稳定性。
flex: 1 1 0% 不等于 flex: 1 1 0px，但很多人误以为它“从零开始”就一定安全
它实际解析为 flex-basis: 0%，不是 0px。这个百分比参与「基准总和」计算：剩余空间 = 容器宽 − 所有 flex-basis 之和。当所有子项都设 flex: 1 1 0，flex-basis 就是 0%，总和为 0，剩余空间全量分配——看似公平，实则抹掉了内容宽度兜底。
- 文字被截断、图标挤压变形，根本原因不是
flex-grow太大，而是flex-basis: 0%让元素失去初始占位依据 - 若子项含长英文单词或未设宽的
<img>，浏览器仍会尝试按固有尺寸撑开，但flex-shrink: 1（默认）又允许压缩，结果就是不可控塌缩 - 真正需要严格比例时（如三列卡片均分屏幕），
flex: 1 1 0%是合理选择；但若子项内容长度差异大（如按钮文字长短不一），应改用flex: 1 1 auto
想让两个子项按 2:1 视觉比例缩放，不能只调 flex-shrink 数值
flex-shrink 生效前提是容器主轴方向总宽 > 可用宽度，且子项必须有可收缩的“原始空间”。设 flex-shrink: 2 和 flex-shrink: 1 并不直接对应“缩成 1/2 宽”，而是参与加权压缩：最终收缩量 ∝ flex-shrink × flex-basis。
- 统一设
flex-basis: 0（即flex: 2 2 0和flex: 1 1 0），才能让初始占位和收缩权重完全对齐 2:1 - 若子项本身有固有尺寸（比如一张
400px宽图和一张200px宽图），要维持视觉比例，就得设flex-shrink: 1和flex-shrink: 2，使 400×1 = 200×2 - Safari 对
min-width: 0更敏感，漏掉这行，flex-shrink常静默失效；含<img>或内联块的子项务必显式加min-width: 0
flex-grow 按比例伸展失败？大概率是 flex-basis 没归零
flex-grow 分配的是「剩余空间」，不是容器总宽的百分比。设三个子项 flex-grow: 1 却宽度不等，问题不在 flex-grow，而在它们的 flex-basis 默认是 auto——浏览器先按内容宽度占位，再分剩余空间，起点不同，结果必然失真。
- 写
flex: 1 0 0（即flex-grow: 1、flex-shrink: 0、flex-basis: 0）比单独写flex-grow: 1更可靠，避免意外收缩 -
flex-basis: 0和flex-basis: 0%在现代浏览器中行为一致，但 IE10/11 对后者支持不稳定，保守起见可用flex-basis: 0%或降级为显式声明 - 含图片的子项，除了
flex: 1 0 0，还得加min-width: 0和box-sizing: border-box，否则边框或 padding 会撑出容器
响应式场景下，别在 media query 里反复改 flex-grow
flex-grow 是无单位权重，它不表达“占屏 40%”这种绝对需求；真正决定“从哪开始伸缩”的，永远是 flex-basis。媒体查询里只该动 flex-basis 和排列方式，而不是数字权重。
立即学习“前端免费学习笔记（深入）”；
- 大屏：设
flex-basis: 33.333%+flex-grow: 0，禁止拉伸，保持等分 - 中屏：改
flex-basis: 50%，配合flex-wrap: wrap自动换行 - 小屏：设
flex-basis: 100%，所有子项独占一行；此时flex-grow已无意义，可省略 - 用
flex-basis: 300px比百分比更可控，尤其配合flex-wrap时，能自然实现“最小宽度达标才并排”
flex-shrink，还是内容撑开导致 flex-grow 失效？靠背公式没用，得打开 DevTools 的 Flexbox overlay，实时看基线、剩余空间线和 computed flex-basis 值。 
