在使用 CSS Flexbox 进行布局时，flex-shrink 属性是非常重要的一个参数。它决定了弹性容器在空间不足时，如何缩小弹性子项目。
什么是 flex-shrink
flex-shrink 是 CSS Flexbox 布局中的一个重要属性，它用于设置弹性项目在空间不足时如何缩小。当弹性容器的空间不足以容纳所有子项目时，flex-shrink 决定哪些子项目将会被缩小。
该属性的值表示该弹性项目的「缩小比例」，也即当空间不足时该项目相对于其他项目应该缩小的比例。
如何使用 flex-shrink
flex-shrink 属性的值通常为正整数，默认值为 1。这意味着，当空间不足时，所有子项目的尺寸都会被等比例地缩小。如果将其中某一个子项目的 flex-shrink 值设置为 0，那么它不会被缩小。
如果某个子项目的 flex-shrink 值非常大，那么它在空间不足时将被优先缩小。
以下是一个示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ------ ------ ------- ------ - ----- - ------ ------ ------- ------ ----------------- ----- ------- ----- ------------ -- - ----------- - ------------ -- -
在这个例子中，.container 是一个弹性容器，包含了多个弹性子项目.item。其中一个被指定为.small，并设置了flex-shrink: 0，表示它不会被缩小。
总结
在 CSS Flexbox 布局中，flex-shrink 是一个非常重要的属性。它决定了弹性子项目在空间不足时应该如何缩小。建议在使用 Flexbox 布局时，对 flex-shrink 属性进行适当的设置，以达到最佳的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d32779b5eee0b525aac08b