flex-shrink 属性定义了项目在必须缩小的情况下，相对于其他项目应该收缩的比例。默认值为 1，表示项目将根据需要缩小。
语法
flex-shrink: <number>;
<number>: 一个数字，用于指定项目相对于其他项目应该收缩的比例。默认值为 1。
示例
假设有一个父容器，包含了三个子元素，并且设置了 display: flex;：
<div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div>
-- -------------------- ---- ------- ------- - -------- ----- - ------ - ------------ -- ------- --- ----- ------ -------- ----- -
在上面的示例中，三个子元素都设置了 flex-shrink: 1;，这意味着它们在必要时会等比例缩小。如果其中一个子元素的内容过多，导致父容器不够宽来容纳所有子元素，那么这三个子元素会根据各自的 flex-shrink 值来相应地缩小。
注意事项
flex-shrink值为 0 时，表示项目不应该缩小。如果所有项目的flex-shrink值都为 0，即使父容器不够宽，项目也不会缩小。flex-shrink值为负数时，表示项目应该放大。通常情况下，我们不会使用负数作为flex-shrink的值。
以上就是关于 CSS 属性 flex-shrink 的介绍，希望能帮助你更好地理解和运用 Flexbox 布局。