在 Flexbox 布局中，flex-shrink 属性指定了弹性盒中一个项目在空间不足时该如何缩小。当容器空间不足以容纳所有项目时，flex-shrink 属性控制每个项目缩小的程度。
接下来，我们将介绍 Flexbox 布局中的五种不同的 flex-shrink 策略，通过这些策略，你可以更好地控制项目的缩小效果。
1. 默认策略：所有项目都缩小
默认情况下，所有项目都会缩小以适应可用空间。这意味着，如果容器中的项目过多，它们将会变得非常小，可能会使布局难以阅读和使用。
.container {
display: flex;
}
.item {
flex-shrink: 1;
}使用这种策略时，请确保考虑到容器中的项目数量和容器大小，以避免项目变得过小或难以阅读。
2. 指定项目大小：只缩小一部分项目
如果你想要一个或多个项目在空间不足时不会缩小太多，可以通过指定一个 flex-basis（项目的基准宽度）来实现。
-- -------------------- ---- ------- ---------- - -------- ----- - --------- - ----------- ------ - --------- - ------------ -- -
在这个示例中，第一个项目的基准宽度为 200px，而第二个项目可以缩小以适应空间。
3. 指定项目优先级：只缩小优先级低的项目
你也可以为项目指定一个优先级，使得优先级较低的项目在空间不足时先被缩小。这是通过使用 order 属性来实现的。
-- -------------------- ---- ------- ---------- - -------- ----- - --------- - ------ -- ------------ -- - --------- - ------ -- ------------ -- -
在这个示例中，第一个项目拥有一个优先级为 2，而第二个项目拥有一个优先级为 1。当空间不足时，第二个项目将比第一个项目缩小得更多。
4. 禁止项目缩小：只缩小可缩小项目
如果你想要某些项目在空间不足时不被缩小，可以将它们的 flex-shrink 属性设为 0。这意味着只有可缩小的项目才会缩小以适应容器大小。
-- -------------------- ---- ------- ---------- - -------- ----- - --------- - ------------ -- - --------- - ------------ -- -
在这个示例中，第一个项目的 flex-shrink 属性为 0，因此它不会缩小以适应空间。第二个项目可以缩小以适应空间，因为它的 flex-shrink 属性为 1。
5. 多次缩小：对项目进行连续缩小
最后，你可以使用 flex-shrink 属性对项目进行连续缩小。这是通过为每个项目设置一个 flex-shrink 值来实现的，只有空间不足时，它们才会被连续缩小。
-- -------------------- ---- ------- ---------- - -------- ----- - --------- - ------------ -- - --------- - ------------ -- - ----------- - ------------ -- -
在这个示例中，第二个项目最易于缩小，因为它的 flex-shrink 值为 3。随着空间逐渐减少，所有项目都会逐渐缩小，但第二个项目缩小得更快。
结论
Flexbox 布局中的 flex-shrink 属性使得我们可以更好地控制项目在空间不足时的缩小效果。选择正确的策略，可以确保在容器大小变化时，你的布局保持易于阅读和使用的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671820a6ad1e889fe227728d