在css弹性布局中，flex-grow和flex-shrink是控制子元素尺寸伸缩的核心属性，前者决定子元素在容器有剩余空间时的放大比例，后者决定子元素在容器空间不足时的缩小比例，两者配合flex-basis属性可以精准控制布局的自适应能力。
flex-grow属性详解
flex-grow用来定义子元素的放大比例，默认值为0，表示即使容器有剩余空间也不会放大。当多个子元素的flex-grow值之和大于0时，剩余空间会按照各子元素flex-grow值的比例进行分配。
取值规则
- 取值为非负数字，默认值为0
- 值为0时，元素不会放大，保持flex-basis设定的基础尺寸
- 值为正数时，元素会按照比例分配剩余空间
计算示例
假设容器宽度为600px，三个子元素的flex-basis都设为100px，flex-grow分别设为1、2、1，那么剩余空间为600 - 100*3 = 300px，三个元素分配到的额外空间分别是300*(1/(1+2+1))=75px、300*(2/(1+2+1))=150px、300*(1/(1+2+1))=75px，最终尺寸分别为175px、250px、175px。
代码示例
/* 容器样式 */
.flex-container {
display: flex;
width: 600px;
height: 100px;
border: 1px solid #ccc;
}
/* 子元素基础样式 */
.flex-item {
height: 100%;
flex-basis: 100px;
}
/* 不同flex-grow值 */
.item1 {
flex-grow: 1;
background-color: #f8b4b4;
}
.item2 {
flex-grow: 2;
background-color: #b4f8b4;
}
.item3 {
flex-grow: 1;
background-color: #b4b4f8;
}
<div class="flex-container">
<div class="flex-item item1">flex-grow:1</div>
<div class="flex-item item2">flex-grow:2</div>
<div class="flex-item item3">flex-grow:1</div>
</div>
flex-shrink属性详解
flex-shrink用来定义子元素的缩小比例，默认值为1，表示当容器空间不足时，子元素会等比例缩小。如果设置为0，元素不会缩小，可能会溢出容器。
取值规则
- 取值为非负数字，默认值为1
- 值为0时，元素不会缩小，保持flex-basis设定的基础尺寸
- 值为正数时，元素会按照比例缩小以适应容器空间
计算示例
假设容器宽度为400px，三个子元素的flex-basis都设为200px，flex-shrink分别设为1、2、1，那么溢出空间为200*3 - 400 = 200px，三个元素需要缩小的尺寸分别是200*(1*200/(1*200 + 2*200 + 1*200))=50px、200*(2*200/(1*200 + 2*200 + 1*200))=100px、200*(1*200/(1*200 + 2*200 + 1*200))=50px，最终尺寸分别为150px、100px、150px。
代码示例
/* 容器样式 */
.flex-container {
display: flex;
width: 400px;
height: 100px;
border: 1px solid #ccc;
}
/* 子元素基础样式 */
.flex-item {
height: 100%;
flex-basis: 200px;
}
/* 不同flex-shrink值 */
.item1 {
flex-shrink: 1;
background-color: #f8b4b4;
}
.item2 {
flex-shrink: 2;
background-color: #b4f8b4;
}
.item3 {
flex-shrink: 1;
background-color: #b4b4f8;
}
<div class="flex-container">
<div class="flex-item item1">flex-shrink:1</div>
<div class="flex-item item2">flex-shrink:2</div>
<div class="flex-item item3">flex-shrink:1</div>
</div>
两者结合使用场景
实际开发中通常将flex-grow和flex-shrink结合使用，配合flex-basis写成flex简写形式，比如flex: 1 1 0%表示元素可以放大、可以缩小，基础尺寸为0，会占满剩余空间。以下是常见的自适应导航栏示例：
.nav {
display: flex;
width: 100%;
height: 50px;
border-bottom: 1px solid #eee;
}
.nav-logo {
flex: 0 0 120px; /* 不放大不缩小，固定宽度120px */
background-color: #333;
color: #fff;
line-height: 50px;
text-align: center;
}
.nav-menu {
flex: 1 1 auto; /* 可以放大缩小，基础尺寸自动 */
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 20px;
}
.nav-item {
margin-left: 20px;
white-space: nowrap;
}
<div class="nav">
<div class="nav-logo">Logo</div>
<div class="nav-menu">
<div class="nav-item">首页</div>
<div class="nav-item">产品</div>
<div class="nav-item">关于我们</div>
</div>
</div>
注意事项
- flex-grow和flex-shrink的计算都基于flex-basis设定的基础尺寸，而非元素最终尺寸
- 当flex-basis设为auto时，元素的基础尺寸会参考自身宽度或内容宽度
- 如果子元素设置了width属性，flex-basis的优先级更高
- flex-shrink的缩小计算会考虑元素的基础尺寸，基础尺寸越大的元素缩小幅度相对更大
flex-growflex-shrinkflex布局自适应伸缩修改时间：2026-06-11 14:24:28