CSS Flexbox 是一种非常强大的布局方式，它可以帮助开发者更方便地实现复杂的布局效果。在 Flexbox 中，有两个非常重要的属性：flex-grow 和 flex-shrink。
flex-grow 属性
flex-grow 属性用于控制 Flex 容器中子元素的扩展比例。它的取值为一个非负数，表示子元素的扩展比例。当容器的空间比子元素的总宽度大时，子元素会按照 flex-grow 属性设置的比例来扩展。如果所有子元素的 flex-grow 属性都为 1，则它们会平均分配容器的剩余空间。
下面是一个简单的例子：
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ - ------ - ---------- -- - ------ - ---------- -- - ------ - ---------- -- -
在上面的例子中，我们将容器设置为 Flex 容器，并且使用 justify-content 属性将子元素分散对齐。然后，我们分别给子元素设置了不同的 flex-grow 属性。当容器的宽度比子元素的总宽度大时，子元素会按照 flex-grow 属性设置的比例来分配剩余的空间。
flex-shrink 属性
flex-shrink 属性用于控制 Flex 容器中子元素的收缩比例。它的取值也是一个非负数，表示子元素的收缩比例。当容器的空间比子元素的总宽度小时，子元素会按照 flex-shrink 属性设置的比例来收缩。如果所有子元素的 flex-shrink 属性都为 1，则它们会平均收缩，以适应容器的空间。
下面是一个简单的例子：
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------ ------ - ----- - ------ ------ ------- ------ - ------ - ------------ -- - ------ - ------------ -- - ------ - ------------ -- -
在上面的例子中，我们将容器设置为 Flex 容器，并且使用 justify-content 属性将子元素分散对齐。然后，我们分别给子元素设置了不同的 flex-shrink 属性。当容器的宽度比子元素的总宽度小时，子元素会按照 flex-shrink 属性设置的比例来收缩，以适应容器的空间。
总结
在 Flexbox 中，flex-grow 和 flex-shrink 是两个非常重要的属性，它们可以帮助我们更好地控制子元素的扩展和收缩。理解这两个属性的作用和用法，可以帮助我们更好地实现复杂的布局效果。
希望本文对大家有所帮助，同时也希望大家能够在实际开发中多加练习，深入理解 Flexbox。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6619d95fd10417a222a846de