flex-grow定义项目在有剩余空间时的扩展比例，默认0不扩展；flex-shrink控制空间不足时的收缩能力，默认1可收缩。两者配合flex-basis可实现精准布局控制，如侧边栏固定宽、主内容区自适应。常见场景中，.sidebar设flex:0 0 200px保持固定，.main设flex:1 1 0填满剩余空间并可压缩。需注意flex-basis对计算起点的影响，避免仅关注grow/shrink而忽略布局偏差。设flex-shrink:0可防止关键元素被压缩，结合媒体查询优化响应式表现。掌握三者协同逻辑能提升布局灵活性与稳定性。
在 CSS Flexbox 布局中，flex-grow 和 flex-shrink 是控制弹性项目如何分配容器空间的两个关键属性。它们通常与 flex-basis 一起使用（合称 flex），但在实际开发中，单独调整 grow 和 shrink 能更精细地控制布局行为。
flex-grow 的作用
flex-grow 定义了弹性项目在有剩余空间时，按比例扩展的能力。默认值为 0，表示不扩展。
值为 0：项目不伸展，保持原有尺寸值为 1 或更大：项目将按比例占据剩余空间多个项目之间会根据数值比例分配空间，比如一个设为 1，另一个为 2，后者将获得两倍于前者的扩展空间
flex-shrink 的作用
flex-shrink 控制项目在空间不足时是否以及如何收缩。默认值是 1，表示允许收缩。
值为 0：项目不会被压缩，即使内容超出容器值为 1 或更大：项目可按权重缩小，值越大，缩得越多当所有项目都设为 flex-shrink: 0 时，可能出现溢出容器的情况
两者配合的实际场景
合理搭配 flex-grow 和 flex-shrink 可以实现灵活且健壮的布局。例如在一个侧边栏 + 主内容区的布局中：
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 
立即学习“前端免费学习笔记（深入）”；
.container { display: flex;}.sidebar {flex: 0 0 200px; / 不扩展、不收缩、基础宽度200px /}
.main {flex: 1 1 0; / 可扩展、可收缩、基础宽度从0开始 /}
sidebar 固定宽 200px，既不随容器变大而拉伸，也不因容器变小而压缩main 区域会填满剩余空间，同时在屏幕缩小时自动压缩内容区域这里的 flex: 1 1 0 相当于 flex-grow: 1, flex-shrink: 1, flex-basis: 0
常见误区与建议
使用这两个属性时容易忽略的是 flex-basis 的影响，它决定了计算增长或收缩的起点。
不要只关注 grow/shrink，忽视 basis。比如 flex-basis: 0 和 auto 对空间分配结果差异很大当希望某个元素“占位但不退让”，设置 flex-shrink: 0 很有效，如固定宽度按钮或标签在响应式设计中，结合媒体查询动态调整 shrink 值，可以避免小屏下内容被过度挤压
基本上就这些。掌握 flex-grow 与 flex-shrink 的配合逻辑，能让你用更少代码写出更稳定的弹性布局。
以上就是css flex-grow与flex-shrink配合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/977044.html
微信扫一扫 
支付宝扫一扫 
