flex-grow 按剩余空间比例分配而非总宽比例，仅在有剩余空间时生效；flex-basis 是基准尺寸，优先于 width；flex-shrink 默认为1，会压缩超容内容；需配合 min/max-width 保障可读性与布局稳定。
flex-grow 值不是“权重比”，而是剩余空间的分配比例
很多人以为 flex-grow: 2 和 flex-grow: 1 是按 2:1 “分总宽度”，其实不是——它只对**剩余空间**生效。如果所有子项加起来已经撑满容器，flex-grow 完全不干活。
- 先按
width/flex-basis占位，再算剩下多少空间 - 所有
flex-grow非零项，按各自值占「总 grow 值」的比例分剩余空间 -
flex-grow: 0的项完全不参与伸缩，哪怕容器还有空
比如容器宽 600px，两个子项：flex-basis: 200px + flex-grow: 1，另一个 flex-basis: 300px + flex-grow: 2。已占 500px，剩 100px；分配比例是 1:(1+2)=1/3 和 2/3 → 实际宽度变成 233px 和 367px。
别混用 flex-basis 和 width，否则行为不可控
flex-basis 是弹性布局里真正的“基准尺寸”，width 在 flex 容器中只是 fallback。一旦同时设了 width 和 flex-basis，浏览器会优先用 flex-basis，但某些旧版 Safari 会出错，导致布局塌陷或溢出。
- 想固定初始宽度？统一用
flex-basis: 120px，别写width: 120px - 想内容自适应？用
flex-basis: auto（默认值），此时才尊重width或内容宽度 - 设成
flex-basis: 0+flex-grow: 1是实现等分最稳的方式，避免内容宽度干扰
错误示例：width: 100px; flex-basis: 200px; → Chrome 按 200px 算，IE11 可能按 100px，结果不一致。
立即学习“前端免费学习笔记（深入）”；
flex-shrink 默认为 1，内容超长时会压缩，不是“保持原样”
很多人以为没设 flex-shrink 就不会缩小，其实默认就是 flex-shrink: 1。只要容器不够宽，子项就会被压缩——哪怕里面是文字、图片或固定宽的组件。
- 防压缩：显式写
flex-shrink: 0，尤其对图标、按钮、输入框这类不能变窄的元素 - 压缩不均？检查各子项的
flex-basis和自身内容宽度，flex-shrink是按「超出部分 × shrink 值」计算压缩量的 - 和
flex-grow不同，flex-shrink的计算基数是「自身 flex-basis」，不是剩余空间
典型问题：flex-basis: 200px; flex-shrink: 1 的项，在容器只剩 150px 宽时，可能被压到 150px 以下（取决于其他兄弟项的 shrink 值和 basis）。
视觉权重 ≠ CSS 权重，需结合 min-width/max-width 控制下限
单纯调 flex-grow 无法防止内容被挤得看不见。比如一个带文字的卡片，flex-grow: 3 在小屏下仍可能缩成一行字都显示不全。
- 必须配
min-width：如min-width: 240px，确保基础可读性 - 大屏下防过宽？加
max-width，比如max-width: 480px，避免拉太开破坏节奏 - 注意：min/max-width 对
flex-basis: auto有效，但对flex-basis: 0无效（此时尺寸完全由 grow 决定）
真正难控的点不在 flex 属性本身，而在你有没有预判内容最小可用尺寸——这没法靠算法算出来，得看文案长度、图标大小、行高这些实际约束。
