flex-grow在空间过剩时按比例分配剩余空间，flex-shrink在空间不足时按项目原始尺寸加权收缩以适应容器，两者分别控制扩展与压缩行为。
在 CSS Flexbox 布局中，flex-grow 和 flex-shrink 是控制弹性项目如何分配容器内剩余空间或应对空间不足的关键属性。它们虽然都影响项目的尺寸变化，但作用方向和触发条件完全不同。
flex-grow 定义了弹性项目在容器有额外空间时，能够“拉伸”占用剩余空间的比例。
• 默认值为 0，表示不扩展。 • 设置为大于 0 的数值时，项目将按比例分摊容器的剩余空间。 • 分配方式基于所有项目的 flex-grow 值比例计算。例如，两个项目分别设置 flex-grow: 1 和 flex-grow: 2，那么剩余空间将按 1:2 的比例分配，后者获得两倍于前者的扩展空间。
flex-shrink 控制当弹性项目总尺寸超过容器时，项目如何“压缩”以避免溢出。
立即学习“前端免费学习笔记（深入）”；
• 默认值为 1，表示允许收缩。 • 值越大，项目被压缩的程度越高。 • 收缩量不仅取决于 flex-shrink 值，还与项目原始大小有关（加权计算）。比如一个项目内容宽 200px，另一个宽 100px，都设置了 flex-shrink: 1，当空间不足时，前者会比后者多“让出”更多空间，因为它的基础尺寸更大。
flex-basis 通过 flex 简写统一设置。
基本上就这些。理解它们的作用时机和计算逻辑，就能更精准地控制 Flex 项目的动态尺寸行为。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
300
收藏
