通过 flex-grow 和 flex-shrink 可实现子元素自动填充父容器。flex-grow 控制扩展比例，值越大占用剩余空间越多；flex-shrink 决定收缩能力，默认为 1 表示可压缩，设为 0 则禁止收缩；配合 flex-basis 设置初始尺寸，使用 flex 简写如 flex: 1（等价于 flex: 1 1 0）或 flex: 0 0 200px 实现精确布局。典型应用包括侧边栏固定宽度、主内容区自适应及多列等分布局，需注意父容器设为 display: flex 并合理设置 min-width 防止内容溢出。
在使用 CSS Flex 布局时，让子元素自动填充父容器是一个常见需求。通过 flex-grow 和 flex-shrink 属性，我们可以灵活控制子元素如何分配剩余空间或收缩以适应容器。下面结合实际场景说明如何使用这两个属性实现自动填充效果。
flex-grow：控制子元素的扩展能力
当父容器有剩余空间时，flex-grow 决定子元素是否以及按什么比例扩展。
默认值为 0，表示不扩展。设置为大于 0 的数值时，子元素将按比例占据剩余空间。
例如：- 两个子元素分别设置 flex-grow: 1 和 flex-grow: 1，它们平分剩余空间。
- 若一个设为 2，另一个为 1，则前者占 2/3，后者占 1/3 的额外空间。
常用场景：实现等宽布局或主内容区自动撑开。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item-1 {
flex-grow: 1; /* 占据可用空间 */
}
.item-2 {
flex-grow: 0; /* 不扩展，保持自身宽度 */
}此时 item-1 会自动填充 container 中除 item-2 外的所有空间。
flex-shrink：控制子元素的收缩能力
当子元素总宽度超过父容器时，flex-shrink 决定它们是否以及按什么比例缩小。
默认值为 1，表示允许收缩。设为 0 则禁止该元素被压缩。
典型问题：即使设置了 width: 100px，子元素仍可能被压缩，就是因为 flex-shrink 默认生效。
.item {
width: 100px;
flex-shrink: 0; /* 禁止收缩，保持 100px */
}这样可以确保某些关键元素不被挤压变形。
flex-basis 配合使用更精确
flex-grow 和 flex-shrink 实际作用于“剩余空间”或“溢出空间”，而这个空间的计算依赖于 flex-basis（相当于初始主轴尺寸）。
完整写法：
```css .item { flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */ } ```这表示：从 200px 开始，可伸展也可收缩。
简写 flex: 1 相当于 flex: 1 1 0，常用于希望子项从零开始占满空间的情况。
实用技巧与注意事项
常见实践：
- 侧边栏固定宽度，主内容区自适应：
侧边栏flex: 0 0 200px，主区flex: 1。 - 多个等分布局：
所有子元素设flex: 1，自动均分容器宽度。 - 防止文字换行导致压缩：
给文本容器加min-width: 0或flex-shrink: 0控制行为。
注意：父容器必须设置 display: flex，否则这些属性无效。
基本上就这些。掌握 flex-grow 和 flex-shrink 的组合，就能轻松实现各种自适应布局，无需计算具体宽度。关键是理解“先定基础尺寸，再决定伸缩行为”的逻辑。不复杂但容易忽略细节。
