flex-grow 控制子元素按比例分配剩余空间，值为0不伸展，1为基准，2为两倍；需父容器设display: flex且子元素无固定宽高限制，仅在主轴方向生效。
flex-grow 怎么让子元素“抢”剩余空间
当容器有空余宽度（或高度）时，flex-grow 决定子元素按比例分走多少。值为 0 表示不伸展，1 是默认基准，2 就是同级 1 的两倍。
常见错误是设了 flex-grow: 1 却发现没变化——往往因为父容器没设 display: flex，或子元素本身有固定宽高（如 width: 200px）锁死了尺寸。
-
flex-grow只在主轴方向生效（flex-direction: row时影响宽度，column时影响高度） - 多个子元素同时设非零
flex-grow，按数值比例分配剩余空间，不是按顺序抢占 - 如果所有子元素
flex-grow都是0，剩余空间就留白，不会自动缩放内容
flex-shrink 为什么子元素反而被压缩得变形了
flex-shrink 控制子元素在空间不足时的“收缩意愿”。默认值是 1，意味着会等比缩小；设为 0 则强制不缩小——这点常被忽略，导致文字换行错乱或图片被压扁。
典型踩坑场景：容器宽度固定为 300px，三个子项都设了 width: 120px，总和超了，浏览器就会按 flex-shrink 值缩放。若某一项设了 flex-shrink: 0，它就保持 120px，其余两个承担全部压缩压力。
-
flex-shrink的计算基于flex-basis（不是width或height），所以即使写了width，只要没显式设flex-basis，仍以内容尺寸为基准收缩 - 负值非法，会被忽略
- 移动端小屏下，盲目设
flex-shrink: 0可能导致横向滚动，需配合min-width: 0防止内容撑开
flex-basis 是起点，不是限制
flex-basis 定义子元素在分配剩余空间前的“初始主轴尺寸”，类似 width 或 height，但它只在 Flex 布局中起作用，且优先级高于 width（当两者冲突时，flex-basis 胜出）。
最易混淆的是把 flex-basis: 0 当作“清空宽度”，其实它表示“从零开始分配空间”，配合 flex-grow: 1 才能达到均分效果；而 flex-basis: auto 会先读取 width/height，再参与伸缩计算。
-
flex-basis: 0+flex-grow: 1是实现等分布局的可靠组合，比用百分比更健壮 -
flex-basis: content在现代浏览器支持有限，慎用；老项目建议坚持用auto或具体数值 - 设
flex-basis: 100%时，实际表现取决于父容器是否已知尺寸——父容器宽高未定，100%会退化为auto
三属性合写时的隐式行为最容易漏掉
用 flex 简写（如 flex: 1、flex: 0 1 auto）时，未写出的值会按规则重置：flex: 1 等价于 flex: 1 1 0，不是 1 1 auto；flex: none 等价于 flex: 0 0 auto。
这意味着，仅写 flex: 1 的子项，flex-basis 是 0，它会彻底忽略自身 width，完全由 flex-grow 分配空间——如果本意是“尽可能撑满但保留最小内容宽度”，这就错了。
- 需要保留原始尺寸参与计算，显式写
flex: 1 1 auto或flex: 1 1 max-content -
flex: 0 0 auto和flex: none效果一致，但后者语义更清晰，推荐用于禁止伸缩的场景 - IE11 对简写支持不稳定，涉及兼容性时建议拆开写三个属性
真正难的不是记清每个值的含义，而是理解它们如何协同干预“尺寸决策权”：谁先占位、谁愿意让、谁主动要——而这三步一旦错序，布局就容易在不同内容长度或视口尺寸下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
