flex-grow按权重分配剩余空间而非均分父容器宽度，仅在有剩余空间时生效；flex-shrink控制溢出时的收缩比例，以flex-basis为基准；flex-basis优先级高于width，min-width为收缩下限。
flex-grow 是怎么分配剩余空间的
flex-grow 不是按比例“瓜分”父容器宽度，而是按权重“分配剩余空间”。它只在父容器有剩余空间（即子项总基础尺寸小于容器）时才起作用。
- 如果所有子项设置了
flex-grow: 1，剩余空间被均分，每个子项额外获得相同宽度 - 如果一个子项设
flex-grow: 2，另一个设flex-grow: 1，剩余空间按 2:1 分配（不是最终宽度比为 2:1） -
flex-grow对已溢出的子项无效——它不压缩内容，只扩展
常见误解：以为 flex-grow: 2 就能让元素占满两倍宽度。实际结果还取决于它们的 flex-basis（默认是 auto，即内容宽度）。如果某项文字很长，flex-basis 就大，即使 flex-grow 小，它也可能更宽。
flex-shrink 怎么影响缩小时的行为
flex-shrink 控制当容器空间不足时，子项是否以及按什么比例缩小。它的默认值是 1，意味着所有子项会按自身 flex-basis（或 width）为基准，等比收缩。
- 设
flex-shrink: 0的子项完全不缩小，哪怕内容溢出容器或触发横向滚动 - 设
flex-shrink: 2的子项，比flex-shrink: 1的收缩得更快（收缩量 = 基准尺寸 ×flex-shrink× 收缩因子） - 注意：
flex-shrink只对“可缩小”的尺寸生效；如果子项含不可折行文本（如长 URL）、white-space: nowrap或固定宽图片，它可能无法有效缩小，反而撑破布局
典型踩坑：在卡片列表中给图标区域设 flex-shrink: 0，但没限制图标容器最大宽，结果图标拉伸变形——应配合 max-width 或 overflow: hidden。
立即学习“前端免费学习笔记（深入）”；
width / flex-basis / min-width 三者怎么配合
这三者共同决定一个 flex 项的“初始主轴尺寸”，顺序和优先级很关键：
-
flex-basis优先级最高（显式设置时），它替代width作为基础尺寸 - 若
flex-basis: auto（默认），则取width值；若width也没设，则由内容撑开 -
min-width是底线：即使flex-shrink再大，子项也不会缩到min-width以下
实用组合示例：
.item {
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
min-width: 120px;
}
这样既保证最小可用宽度，又允许在空间充足时扩展，在紧凑时缩到 120px 为止。
为什么 flex-grow + flex-shrink 搭配后还是错位或换行
最常被忽略的是 flex-wrap 和盒模型干扰：
- 父容器默认
flex-wrap: nowrap，一旦子项总宽超容器，就会横向溢出，而非换行——需显式加flex-wrap: wrap - 子项的
padding、border、margin会影响实际占用空间，但flex-basis默认不包含它们（box-sizing 是 content-box 时） - 使用
flex: 1等价于flex: 1 1 0%，而0%会让浏览器按 0 基础尺寸计算，再靠flex-grow填满——此时若子项有 padding，可能导致视觉上不均等
建议统一用 box-sizing: border-box，并在需要精确控制时显式写全 flex 三值，比如 flex: 1 1 240px，而不是依赖缩写。
宽度不均匀的本质，往往不在 flex-grow 或 flex-shrink 本身，而在你没意识到 flex-basis 正在悄悄接管宽度控制权。
