flex-grow、flex-shrink、flex-basis通过flex简写控制伸缩行为：flex-grow按比例分配剩余空间，默认0不放大；flex-shrink定义压缩比例，默认1可压缩，0不压缩；flex-basis设置主轴初始尺寸，优先级高于width。常用简写如flex:1（等分空间）、flex:0 1 auto（默认值）、flex:none（固定大小）。
在 CSS Flexbox 布局中，flex-grow、flex-shrink 和 flex-basis 是控制 flex 项目如何伸缩的关键属性。它们通常通过简写属性 flex 一起设置，理解它们的组合使用对精准布局至关重要。
定义项目在容器中有剩余空间时，按比例放大的能力。
• 默认值为 0，表示不放大。例如：
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
容器剩余空间会按 1:2 分配给 item1 和 item2。
立即学习“前端免费学习笔记（深入）”；
定义当所有项目总尺寸超过容器时，项目缩小的比例。
• 默认值为 1，表示可等比压缩。例如：
.item1 { flex-shrink: 0; } /* 不压缩 */
.item2 { flex-shrink: 2; } /* 压缩程度是默认项的两倍 */
定义项目在伸缩前的初始大小，相当于“首选宽度”（对 row 布局而言）。
• 可设为具体值如 100px、20% 等。注意：flex-basis 优先级高于 width。
实际开发中，一般使用 flex 简写来同时设置三个属性：
flex: [flex-grow] [flex-shrink] [flex-basis];
• flex: 1 等价于 flex: 1 1 0；项目可伸可缩，基础大小为 0。
• flex: 0 1 auto 是默认值，不放大，可缩小，大小基于内容。
• flex: none 等价于 flex: 0 0 auto；完全不伸缩。
• flex: 2 1 150px 表示放大比例 2，可缩小，初始宽 150px。
常见场景：
• 均分空间：父容器 display: flex; 子项 flex: 1；基本上就这些。掌握 flex 的三属性组合，能让你灵活应对大多数弹性布局需求。关键是理解每个属性的作用和默认行为，避免依赖猜测。
以上就是css flex-grow flex-shrink flex-basis综合使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
351
收藏
