flex-grow控制子元素在容器有剩余空间时的扩展比例，默认为0不扩展；flex-shrink控制空间不足时的收缩能力，默认为1允许收缩。两者结合可精准分配空间，避免溢出或过度压缩，常通过flex简写属性统一设置。
Flex布局中，子元素的弹性伸缩主要由 flex-grow 和 flex-shrink 属性控制。它们决定了当容器有剩余空间或空间不足时，子元素如何分配空间。理解这两个属性是掌握Flex布局弹性行为的关键。
flex-grow：控制子元素的扩展能力
flex-grow 定义了子元素在容器中有剩余空间时，能够“拉伸”所占比例的大小。默认值为 0，表示不扩展。
取值为无单位的数字，数值越大，占据的剩余空间越多。
• 值为 0：不参与扩展，保持原始尺寸• 值为 1 或更大：按比例分配剩余空间
• 所有子项的 flex-grow 总和决定各自占比
例如：三个子元素分别设置 flex-grow 为 1、2、1，那么剩余空间将被分为4份，它们分别占据 1/4、2/4、1/4。
flex-shrink：控制子元素的收缩能力
flex-shrink 决定当子元素总宽度超出容器时，是否以及按什么比例“压缩”。默认值为 1，表示允许收缩。
• 值为 0：不收缩，即使内容溢出也不变• 值为 1 或更大：数值越大，压缩得越明显
• 实际压缩量还受元素自身基础尺寸影响
注意：flex-shrink 并非简单按比例压缩。浏览器会根据每个元素的“收缩权重 × 基础尺寸”来计算应减少的空间，避免内容被过度挤压。
常见使用场景与建议
灵活组合 flex-grow 和 flex-shrink 可实现多种布局效果：
• 让某个区域自适应填满：设置 flex-grow: 1，flex-shrink: 0• 固定尺寸不被挤压：flex-grow: 0, flex-shrink: 0
• 多个等比扩展区域：统一设置 flex-grow: 1
• 主内容区优先展示：主区 flex-grow: 1，侧边栏 flex-shrink: 0
实际开发中，常通过简写属性 flex 来同时设置 grow、shrink 和基础尺寸（flex-basis）：
例如：flex: 1 0 auto; 表示可扩展、不轻易收缩、基于内容定宽。
基本上就这些。掌握 flex-grow 和 flex-shrink 的作用逻辑，就能更精准地控制Flex容器内子元素的空间分配行为，避免意外溢出或压缩问题。
