flex-grow在空间过剩时按比例分配剩余空间，flex-shrink在空间不足时按项目原始尺寸加权收缩以适应容器，两者分别控制扩展与压缩行为。
在 CSS Flexbox 布局中，flex-grow 和 flex-shrink 是控制弹性项目如何分配容器内剩余空间或应对空间不足的关键属性。它们虽然都影响项目的尺寸变化，但作用方向和触发条件完全不同。
flex-grow：扩展以填充多余空间
flex-grow 定义了弹性项目在容器有额外空间时，能够“拉伸”占用剩余空间的比例。
• 默认值为 0，表示不扩展。• 设置为大于 0 的数值时，项目将按比例分摊容器的剩余空间。• 分配方式基于所有项目的 flex-grow 值比例计算。
例如，两个项目分别设置 flex-grow: 1 和 flex-grow: 2，那么剩余空间将按 1:2 的比例分配，后者获得两倍于前者的扩展空间。
flex-shrink：收缩以适应不足空间
flex-shrink 控制当弹性项目总尺寸超过容器时，项目如何“压缩”以避免溢出。
稿定抠图
AI自动消除图片背景
76 查看详情 
立即学习“前端免费学习笔记（深入）”；
• 默认值为 1，表示允许收缩。• 值越大，项目被压缩的程度越高。• 收缩量不仅取决于 flex-shrink 值，还与项目原始大小有关（加权计算）。
比如一个项目内容宽 200px，另一个宽 100px，都设置了 flex-shrink: 1，当空间不足时，前者会比后者多“让出”更多空间，因为它的基础尺寸更大。
关键区别总结
• flex-grow 在空间过剩时起作用，决定谁“多吃”空间。• flex-shrink 在空间不足时生效，决定谁“少吃”以适应布局。• grow 按比例分配的是“多出来的”，shrink 按加权比例收回“超出的部分”。• 两者可单独使用，也可结合 flex-basis 通过 flex 简写统一设置。
基本上就这些。理解它们的作用时机和计算逻辑，就能更精准地控制 Flex 项目的动态尺寸行为。
以上就是css flex-grow与flex-shrink区别详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029047.html
微信扫一扫 
支付宝扫一扫 
