flex-grow按比例分配剩余空间，flex-shrink按权重收缩；如flex:1和flex:2子元素宽比为1:2，flex-shrink越大收缩越强，结合flex简写可实现精确响应式布局。
在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何分配容器剩余空间或收缩以适应空间的关键属性。通过合理设置这两个值，可以轻松实现比例布局。
flex-grow：定义扩展比例
当 flex 容器中有剩余空间时，flex-grow 决定子元素的扩展能力。
• 值为 0 表示不扩展。
• 值大于 0 表示按比例分配剩余空间。
• 比如两个子元素分别设置 flex-grow: 1 和 flex-grow: 2，它们将按 1:2 的比例瓜分剩余空间。
示例：
.container { display: flex;}.item1 { flex-grow: 1; }.item2 { flex-grow: 2; }
此时 .item2 的宽度是 .item1 的两倍（前提是初始宽度相同）。
立即学习“前端免费学习笔记（深入）”；
flex-shrink：定义收缩比例
当子元素总宽度超过容器时，flex-shrink 控制它们的收缩程度。
• 值为 0 表示不收缩。
• 值越大，收缩得越多。
• 默认值是 1，即所有子元素等比收缩。
注意：flex-shrink 计算基于子元素的基准尺寸（flex-basis 或 width）和 shrink 权重综合决定。
九歌
九歌–人工智能诗歌写作系统
322 查看详情 
示例：
.item1 { flex-shrink: 1; width: 200px; }.item2 { flex-shrink: 3; width: 100px; }
当空间不足时，.item2 虽然原始宽度小，但会比 .item1 收缩得更剧烈，因为它的 flex-shrink 值更大。
结合使用实现精确比例布局
要实现稳定的比例布局，推荐使用 flex 简写属性，同时设置 grow、shrink 和 basis。
常见模式：
/* 三等分布局 */.item { flex: 1; } /* 等同于 flex: 1 1 0% *// 2:1 比例布局 /.item1 { flex: 2; }.item2 { flex: 1; }
/ 固定比例，防止压缩到最小内容宽度以下 /.item1 { flex: 2 1 0; }.item2 { flex: 1 1 0; }
其中 flex: N 实际等价于 flex: N 1 0%，表示按比例分配剩余空间，且从 0 开始增长，适合精确比例控制。
基本上就这些。掌握 flex-grow 与 flex-shrink 的权重逻辑，再配合 flex-basis 或设为 0，就能灵活构建各种响应式比例布局。关键在于理解“按比例分配”和“按权重收缩”的机制。
以上就是如何通过css flex-grow与flex-shrink实现比例布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030430.html
微信扫一扫 
支付宝扫一扫 
