Flex布局可以通过设置flex-shrink属性来控制项目在空间不足时的缩小比例，默认值为1，表示当空间不足时项目等比例缩小。
例如，当父元素的宽度不足以容纳所有子元素时，子元素会自动缩小以适应父元素的宽度，从而实现自动挤压。
以下是一个示例：
<style>
.container{
display:flex;
width:300px;
height:100px;
background-color:#f2f2f2;
}
.item{
flex-shrink:1;
background-color:#333;
color:#fff;
font-size:24px;
text-align:center;
line-height:100px;
margin:5px;
padding:10px;
}
</style>
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
<divclass="item">4</div>
</div>
在上面的示例中，父元素的宽度为300px，子元素的宽度为100px，加上每个元素的margin和padding，总宽度超出了父元素的宽度。由于子元素设置了flex-shrink:1属性，它们会自动缩小以适应父元素的宽度，从而实现了自动挤压。
除了flex-shrink属性，还可以使用flex-grow属性来控制项目在剩余空间中的扩展比例，默认值为0，表示不扩展。
例如，当父元素的宽度大于所有子元素的总宽度时，子元素可以自动扩展以填充剩余空间。
以下是一个示例：
<style>
.container{
display:flex;
width:300px;
height:100px;
background-color:#f2f2f2;
}
.item{
flex-grow:1;
background-color:#333;
color:#fff;
font-size:24px;
text-align:center;
line-height:100px;
margin:5px;
padding:10px;
}
</style>
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
<divclass="item">4</div>
</div>
在上面的示例中，父元素的宽度为300px，子元素的宽度为100px，加上每个元素的margin和padding，总宽度小于父元素的宽度。由于子元素设置了flex-grow:1属性，它们会自动扩展以填充剩余空间，从而实现了自动填充。
综合使用flex-shrink和flex-grow属性，可以实现自适应布局，使得元素在空间不足时自动缩小，在空间有余时自动扩展。