通过 flex-gr%ignore_a_1%w 和 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 默认生效。
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情
.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 的组合，就能轻松实现各种自适应布局，无需计算具体宽度。关键是理解“先定基础尺寸，再决定伸缩行为”的逻辑。不复杂但容易忽略细节。
以上就是CSS Flex子元素自动填充父容器_flex-grow flex-shrink实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/966784.html
微信扫一扫 
支付宝扫一扫 
