flex-grow定义项目在有剩余空间时的扩展比例，默认0不扩展，大于0按比例分配；flex-shrink定义空间不足时的收缩能力，默认1可收缩，数值越大收缩越多，常与flex-basis结合通过flex简写设置，实现自适应布局。
在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的重要属性。它们共同决定了弹性项目在主轴方向上的尺寸变化行为。
flex-grow：定义项目的扩展能力
该属性决定一个弹性项目在有剩余空间时，能分配到多少比例的额外空间。
• 默认值为 0，表示不扩展。 • 设置为大于 0 的数值时，项目将按比例扩展以填充容器的剩余空间。 • 比如两个子项分别设置 flex-grow: 1 和 flex-grow: 2，则后者将获得两倍于前者的扩展空间。示例：
假设容器宽度为 500px，两个子项原始宽度各为 100px，总占 200px，剩余 300px。 若两者 flex-grow 都设为 1，则平分剩余空间，各得 150px，最终宽度为 250px。flex-shrink：定义项目的收缩能力
当所有子项的总宽度超过容器时，该属性决定项目被压缩的程度。
立即学习“前端免费学习笔记（深入）”；
注意：实际收缩量不仅取决于 flex-shrink 值，还与项目本身的基准尺寸（flex-basis 或 width）有关。
常见组合写法：flex 属性
通常我们不会单独写 flex-grow 和 flex-shrink，而是通过简写属性 flex 来同时设置。
• flex: 1 等价于 flex: 1 1 0% （常用于等分布局） • flex: 2 1 0% 表示 grow=2, shrink=1, basis=0% • flex: none 表示不伸缩，等价于 flex: 0 0 auto合理设置这两个属性，可以实现灵活、自适应的布局效果，比如导航栏均分、侧边栏固定主内容区自适应等场景。
基本上就这些，掌握 flex-grow 和 flex-shrink 的比例机制，就能更精准控制 Flexbox 中的空间分配。
