flex-grow控制子元素在容器有剩余空间时的扩展比例，值越大分配空间越多；flex-shrink控制空间不足时的收缩比例，默认为1表示可收缩，值为0则不压缩；结合flex-basis使用flex简写可高效实现弹性布局，如flex:1（可伸可缩）、flex:0 1 auto（不扩展可收缩）、flex:1 0 200px（固定最小宽、可扩展），通过合理配置可实现自适应响应式布局。
在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何分配容器剩余空间或在空间不足时如何缩放的核心属性。通过它们可以实现“弹性宽度”的布局效果，让元素智能地扩展或收缩。
flex-grow：控制元素的扩展能力
当 flex 容器中有剩余空间时，flex-grow 决定子元素如何按比例分配这些空间。
默认值为 0，表示不扩展。例如：
- 两个子元素分别设置
flex-grow: 1和flex-grow: 2，则后者将获得两倍于前者所分得的额外空间。 - 所有子项设为
flex-grow: 1，它们将平分剩余空间，实现等宽自适应布局。
flex-shrink：控制元素的收缩能力
当子元素总宽度超过容器时，flex-shrink 决定它们如何按比例缩小以适应容器。
比如：
- 某元素设置
flex-shrink: 0，它将保持原始尺寸不被压缩，其余元素承担全部收缩压力。 - 设置
flex-shrink: 2的元素比flex-shrink: 1的元素收缩得更多。
flex-basis 与 flex 简写
实际使用中，常结合 flex-basis（定义元素的初始主轴尺寸）和上述两个属性，通过 flex 简写一次性设置：
-
flex: 1相当于flex: 1 1 0%—— 可伸可缩，初始宽度为0，靠增长填充空间。 -
flex: 0 1 auto表示不扩展，但可收缩，宽度基于内容。 -
flex: 1 0 200px表示初始宽200px，不可缩但可扩展，适合固定最小宽、弹性拉伸的场景。
基本上就这些。合理搭配 flex-grow 和 flex-shrink，就能让布局在不同屏幕下自然伸缩，无需媒体查询也能实现流畅响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
