CSS Flex子元素自动填充父容器_flex-grow flex-shrink实践

通过 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 默认生效。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

.item {
  width: 100px;
  flex-shrink: 0; /* 禁止收缩，保持 100px */
}

这样可以确保某些关键元素不被挤压变形。

flex-basis 配合使用更精确

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 的组合，就能轻松实现各种自适应布局，无需计算具体宽度。关键是理解“先定基础尺寸，再决定伸缩行为”的逻辑。不复杂但容易忽略细节。

以上就是CSS Flex子元素自动填充父容器_flex-grow flex-shrink实践的详细内容，更多请关注php中文网其它相关文章！