flex-grow控制子元素在容器有剩余空间时的扩展比例，flex-shrink决定空间不足时的收缩行为。默认flex-grow:0不扩展，flex-shrink:1可等比收缩。通过设置不同值可实现内容区自动填满、防止输入框压缩等布局效果。推荐使用flex简写如flex:1（等价于flex:1 1 0%）或flex:1 0 auto，并配合min-width:0解决收缩失效问题，从而构建自适应弹性布局。
在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的核心属性。它们能帮助你实现灵活、自适应的布局，无需固定宽度或媒体查询就能响应不同屏幕尺寸。
flex-grow：定义项目的扩展能力
当容器有剩余空间时，flex-grow 决定子元素如何分配这些额外空间。
默认值为 0，表示不扩展。设置为大于 0 的数值时，项目将按比例扩展。
例如：flex-grow: 1：该项目会占据所有可用的剩余空间flex-grow: 2 vs flex-grow: 1：前者将获得两倍于后者的扩展空间
常见用法：让某个区域（如内容区）自动填满剩余空间。
立即学习“前端免费学习笔记（深入）”；
.container { display: flex;}.sidebar { width: 100px; flex: 0 0 auto; /* 不伸缩 */}.main-content { flex-grow: 1; /* 自动撑满剩余空间 */}
flex-shrink：定义项目的收缩能力
当容器空间不足时，flex-shrink 控制子元素是否以及如何缩小。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
默认值为 1，表示允许按比例缩小。设为 0 时，项目不会被压缩，可能溢出容器。
举例说明：三个子项宽度各为 200px，容器宽 500px —— 总内容超出 100px若都设置 flex-shrink: 1，则每个项目等比缩小约 33.3px若某项 flex-shrink: 0，则它保持 200px，其余两项承担全部压缩量
实用场景：防止文本区域被过度压缩而影响阅读。
.input-group { display: flex;}.label { flex: 0 0 80px; /* 固定宽度，不伸缩 */}.input-field { flex-grow: 1; flex-shrink: 0; /* 禁止收缩，保证输入空间 */}
结合使用：flex 简写更高效
实际开发中，推荐使用 flex 简写属性来同时设置 grow、shrink 和基础尺寸。
flex: 1 等价于 flex: 1 1 0% —— 可伸可缩，基础尺寸从 0 开始flex: 0 1 200px —— 不扩展，可收缩，基础宽度 200pxflex: 1 0 auto —— 可扩展，不可收缩，基于内容大小开始
技巧：设置 min-width: 0 可解决某些情况下 flex-shrink 失效的问题，尤其是内部内容较长时。
基本上就这些。合理搭配 flex-grow 与 flex-shrink，能让布局真正“流动”起来，在各种设备上自然适配。
以上就是如何用css flex-grow与flex-shrink实现自适应伸缩的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1034557.html
微信扫一扫 
支付宝扫一扫 
