flex-grow按比例分配剩余空间，flex-shrink控制溢出时的收缩比例，二者结合实现弹性布局。
在CSS Flex布局中，flex-grow 和 flex-shrink 是控制子元素如何分配容器剩余空间或应对空间不足的关键属性。它们不直接设置尺寸，而是定义伸缩行为，让布局更具弹性。
flex-grow：扩展以填充剩余空间
当Flex容器有剩余空间时，flex-grow 决定子元素的扩展比例。
默认值为0，表示不扩展。设为正整数时，按比例瓜分可用空间。
例如：两个子项分别设置 flex-grow: 1 和 flex-grow: 2，容器剩余空间将按 1:2 分配。 所有子项都设为 flex-grow: 1，则平均分配剩余空间。
它只在主轴方向起作用，且前提是子项未占满容器。
立即学习“前端免费学习笔记（深入）”；
flex-shrink：收缩以适应容器
当子元素总尺寸超过容器时，flex-shrink 控制它们的收缩比例。
Revid AI
AI短视频生成平台
96 查看详情
默认值为1，表示可等比收缩。设为0则禁止收缩，可能造成溢出。
举个例子：三个子项宽度各为200px，容器宽500px。总宽600px超出100px。 若它们的 flex-shrink 分别为 1、2、1，则按权重1:2:1共4份，各自收缩对应比例（25px、50px、25px）。
注意：收缩计算基于项目原始大小乘以 shrink 权重，不是简单等比压缩。
实际应用建议
这两个属性常与 flex-basis 一起使用，简写为 flex 属性。
希望某区域自适应宽度：设置 flex: 1，相当于 flex: 1 1 0% 或 flex: 1 1 auto，视情况而定。 固定侧边栏 + 自适应主内容：侧边栏 flex: 0 0 200px，主区 flex: 1。 防止文本被过度压缩：给文字容器设 flex-shrink: 0。
基本上就这些。理解 flex-grow 与 flex-shrink 的比例机制，能更精准地实现响应式弹性布局，避免依赖固定尺寸带来的适配问题。
以上就是css布局中flex-grow与flex-shrink应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1035677.html
微信扫一扫 
支付宝扫一扫 
