CSS Flexbox 是一种强大的布局方式，能够非常灵活地控制元素的排列和对齐方式。其中，flex-shrink 属性可以控制元素的收缩比例，即当容器最小宽度不足时，元素的收缩优先级。
在使用 Flexbox 进行布局时，元素的宽度一般会根据容器的宽度自适应变化。但是，当容器宽度不足时，元素也需要进行收缩以保证布局的合理。这时，就需要用到 flex-shrink 属性来控制元素的收缩比例。
flex-shrink 属性的语法和取值
flex-shrink 属性用于控制元素的收缩比例，语法如下：
flex-shrink: <number>;
其中，<number> 表示收缩比例的值，可以是任意数字。默认情况下，flex-shrink 属性的值为 1，表示按照默认比例进行收缩。
如果一个元素的 flex-shrink 属性的值为 0，则该元素不会进行收缩，即使容器的宽度不足。
如何使用 flex-shrink 属性
下面我们通过一个例子来演示如何使用 flex-shrink 属性来控制元素的收缩比例。
首先，我们需要创建一个 Flexbox 布局的容器，并在其中添加三个元素。HTML 代码如下：
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div>
接着，为容器添加 Flexbox 布局的样式：
.container {
display: flex;
flex-wrap: wrap;
}这里我们将容器的布局方式设为 flex，这样可以根据容器的宽度自适应地排列元素。同时，我们将容器的 flex-wrap 属性设为 wrap，当容器的宽度不足时，元素可以自动换行。
然后，我们分别对三个元素进行样式设置：
// javascriptcn.com 代码示例
.item {
height: 150px;
flex-grow: 1;
margin: 10px;
box-sizing: border-box;
}
.item1 {
background-color: red;
flex-shrink: 1;
}
.item2 {
background-color: green;
flex-shrink: 2;
}
.item3 {
background-color: blue;
flex-shrink: 3;
}这里，我们将三个元素的高度设为 150px，并设置了它们的 flex-grow 属性为 1，表示宽度可以根据容器自动调整。
接着，我们对三个元素分别设置了不同的背景颜色，并且将它们的 flex-shrink 属性设为不同的值。
最后，效果如下所示（页面宽度自适应）：
从动图中可以看出，当容器的宽度不足时，三个元素按照设定的收缩比例进行了相应的缩小。其中，item3 元素的收缩比例最大，它会最先被缩小，直到最小宽度为 0。
总结
通过以上演示，我们可以发现，使用 flex-shrink 属性可以很方便地控制 Flexbox 布局中元素的收缩比例。在实际项目中，可以根据需求对不同的元素，设置不同的收缩比例，从而达到更好的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe6f1b95b1f8cacdd34842