flex-grow决定子元素扩展比例，flex-shrink控制收缩比例，两者结合flex-basis通过flex简写设置，实现响应式布局。
弹性盒子布局（Flexbox）是CSS中一种强大的布局模型，特别适合在容器内对子元素进行灵活的尺寸分配与对齐。其中 flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应可用空间的关键属性。
理解 flex-grow：扩展填充剩余空间
当容器中有剩余空间时，flex-grow 决定子元素按比例扩展的程度。默认值为 0，表示不扩展。
例如：
.container {display: flex;
}
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }
此时，.item2 将获得两倍于 .item1 或 .item3 的额外空间。三者按 1:2:1 的比例分配剩余空间。
立即学习“前端免费学习笔记（深入）”；
如果所有项目的 flex-grow 都设为 1，则它们均分剩余空间，实现等宽自适应布局。
理解 flex-shrink：压缩避免溢出容器
当子元素总宽度超过容器时，flex-shrink 控制它们如何收缩。默认值为 1，表示允许按比例缩小。
示例：
.container {
display: flex;
width: 300px;
}
.item1 { width: 200px; flex-shrink: 1; }
.item2 { width: 200px; flex-shrink: 2; }
总宽度 400px 超出容器 100px。由于 .item2 的 flex-shrink 是 .item1 的两倍，它将被压缩得更多，减少的空间按 1:2 比例分摊。
若设置 flex-shrink: 0，则该项目不会被压缩，保持原始尺寸（可能造成溢出）。
结合使用 flex-grow 与 flex-shrink
这两个属性常与 flex-basis 一起使用，通过 flex 简写属性统一设置。
比如：
.item { flex: 1 1 200px; }这等价于：
- flex-grow: 1
- flex-shrink: 1
- flex-basis: 200px
表示项目从 200px 开始，可放大也可缩小，适合用于卡片、导航项等需要响应式调整的场景。
基本上就这些。掌握 flex-grow 和 flex-shrink 的比例机制，能让你更自如地构建动态、响应式的 Flexbox 布局。不复杂但容易忽略细节。
