flex-grow和flex-shrink互斥触发：空间充足时仅flex-grow按比例分配剩余空间（基于flex-basis），不足时仅flex-shrink按flex-basis×shrink加权收缩溢出；flex-basis是计算起点，非width替代。
flex-grow 和 flex-shrink 不是“同时分配”，而是互斥触发：容器有剩余空间时只走 flex-grow 流程，空间不足时只走 flex-shrink 流程。真正决定分多少的，不是 grow/shrink 数值本身，而是它们和 flex-basis 共同算出的“初始占用”。
flex-grow 怎么算剩余空间？看的是 flex-basis，不是 width
很多人给子项写了 width: 100px 还设 flex-grow: 1，结果没反应——因为 flex-grow 完全不读 width，它只认 flex-basis（默认是 auto，即内容宽度）。如果内容宽分别是 80px、240px，即使都设 flex-grow: 1，起点就不一样，分到的剩余空间自然不同。
- 想让比例纯粹，必须统一
flex-basis：推荐写flex: 1 1 0（注意是无单位的0，不是0px） -
flex-basis: 0强制所有子项从零开始拉伸，绕过内容干扰 - 若子项含
<img>或<input>，记得加min-width: 0，否则它们自带的min-width: auto会卡住拉伸
flex-shrink 怎么算溢出空间？收缩量跟 flex-basis × shrink 值挂钩
flex-shrink 的计算比 flex-grow 更容易翻车：它不是按比例扣固定像素，而是按「每个子项的 flex-basis × flex-shrink 值」加权收缩。比如三列 flex-basis 分别是 200px、150px、100px，flex-shrink 是 1、2、2，总溢出 100px，那么第一列实际收缩约 33.33px，第二列约 40px，第三列约 26.67px——收缩后宽度不是等比变小，而是权重越重、基数越大，扣得越多。
- 默认
flex-shrink: 1很危险：大尺寸项会被过度压缩，可能把文字挤成一行或截断 - 要保护某项不被压扁，写
flex-shrink: 0；要限制最小宽度，配合min-width使用 - 避免用
width+flex-shrink混搭：width 会被忽略，真正起作用的是flex-basis
为什么 flex: 1 不等于“填满容器”？
flex: 1 等价于 flex: 1 1 0，但它只在父容器有明确主轴尺寸（如 width 或 height）、且子项 flex-basis 统一为 0 时才可靠生效。常见失效场景：
- 父容器
height: auto→ “剩余高度”为 0，flex-grow根本不触发 - 子项有
min-height: auto（浏览器对替换元素的默认行为）→ 必须显式加min-height: 0 - 父容器用了
gap，子项又自己加了margin→ 总高度超限，触发flex-shrink而非flex-grow - 子项内有
white-space: nowrap+ 长无空格字符串 → 强行撑开，flex-basis: 0失效
最常被忽略的一点：flex 布局的空间计算全程基于 flex-basis，不是 width/height，也不是内容尺寸。改错地方，整个分配逻辑就全偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
