flex-grow决定剩余空间分配比例，flex-shrink控制溢出时的压缩比例，二者结合flex-basis通过flex简写灵活布局，核心是理解空间的分配与压缩机制。
在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的核心属性。它们和 flex-basis 一起构成了 flex 的简写语法。下面直接说明这两个属性的实际作用和用法。
flex-grow：决定“剩余空间”如何分配
当 flex 容器中有剩余空间时，flex-grow 决定各个子项能分到多少额外空间。
默认值是 0，表示不放大。设置为大于 0 的数值时，子项将按比例分配剩余空间。
例如：- 两个子项，flex-grow 分别为 1 和 1：平分剩余空间
- 一个设为 2，另一个为 1：前者拿 2/3，后者拿 1/3
代码示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }
此时 .item1 的宽度会是 .item2 的两倍（前提是 flex-basis 相同）。
flex-shrink：决定“空间不足”时如何收缩
当所有子项的总宽度超过容器时，浏览器需要压缩它们。flex-shrink 控制压缩的比例。
默认值是 1，表示可等比缩小。设为 0 表示不收缩。
注意：
收缩不是简单按比例，而是结合项目原本尺寸（content + flex-basis）来计算“权重”。flex-shrink 越大，被压缩得越多。
- flex-shrink: 0 —— 不允许缩小，可能溢出容器
- flex-shrink: 2 —— 比值为 1 的元素多缩一半
示例：
.item1 { flex-basis: 200px; flex-shrink: 1; }
.item2 { flex-basis: 300px; flex-shrink: 2; }
当空间不足时，.item2 因其更大的 flex-shrink 和更宽的基础尺寸，会被压缩得更多。
常用简写：flex
实际开发中，通常使用 flex 简写属性来同时设置 grow、shrink 和 basis。
-
flex: 1等价于flex: 1 1 0%—— 可伸可缩，基础宽度从 0 开始 -
flex: 0 1 auto—— 不放大，可缩小，基于内容宽度 -
flex: none—— 完全不伸缩，等价于flex: 0 0 auto
推荐根据需求选择合适的简写，避免单独写 grow/shrink 导致 basis 不明确。
基本上就这些。掌握 flex-grow 和 flex-shrink 的比例思维，再结合 flex-basis 或简写的 flex，就能灵活控制布局的弹性行为。关键是理解“剩余空间怎么分”和“超了怎么压”。
