在使用 Flexbox 进行布局的过程中，经常会使用到 Flex Grow 和 Flex Shrink 这两个属性。它们分别用来控制弹性盒子中的子元素的扩展和收缩，可以让设计师更好地控制布局的样式和效果。本文将详细介绍 Flex Grow 和 Flex Shrink 的作用，以及如何使用这两个属性来优化布局。
1. Flex Grow 的作用
Flex Grow 属性控制子元素在弹性容器中的分配尺寸。它是一个非负整数，用于指定弹性对象的扩展比例。默认值是 0 ，即表示子元素不会自动扩展。
实例
我们来看一个示例代码，容器中有三个元素， Flex Grow 的值分别为 1 ， 2 ， 3 ，这表示容器中的三个元素在空间不足时，会按照 1:2:3 的比例来分配容器的剩余空间。
-- -------------------- ---- ------- ---------- - -------- ----- -- -- ---- -- -- - ---------- - ---------------- - ---------- -- -- --- - - ---- ---- -- - -- - ---------- - ---------------- - ---------- -- -- --- - - ---- ---- -- - -- - ---------- - ---------------- - ---------- -- -- --- - - ---- ---- -- - -- -
2. Flex Shrink 的作用
Flex Shrink 属性控制子元素在弹性容器中的收缩比例。它也是一个非负整数，用于指定弹性对象的收缩比例。默认值为 1 ，即表示子元素会根据容器的尺寸自动收缩。
实例
我们来看一个示例代码，容器中有三个元素， Flex Shrink 的值分别为 1 ， 2 ， 3 ，当容器不够大时，会按照 1:2:3 的比例来收缩子元素。
-- -------------------- ---- ------- ---------- - -------- ----- -- -- ---- -- -- - ---------- - ---------------- - ------------ -- -- --- - - ---- ------ -- - -- - ---------- - ---------------- - ------------ -- -- --- - - ---- ------ -- - -- - ---------- - ---------------- - ------------ -- -- --- - - ---- ------ -- - -- -
3. Flex Grow 和 Flex Shrink 同时使用的场景
在使用实例代码时，你可能注意到了一个问题：当存在多个子元素时， Flex Grow 和 Flex Shrink 的值会影响其他子元素的宽度。这时就需要使用 Flex Basis 属性来为每个子元素设置相应的宽度。
实例
-- -------------------- ---- ------- ---------- - -------- ----- -- -- ---- -- -- - ---------- - ---------------- - ----- - - ------ -- --- - - ---- -- --------- -- - ---------- - ---------------- - ----- - - ------ -- --- - - ---- -- --------- -- - ---------- - ---------------- - ----- - - ------ -- --- - - ---- -- --------- -- -
在这个示例代码中，子元素 1 的宽度为 200px ，禁止收缩或扩展，子元素 2 的宽度为 300px ，可以扩展或收缩，子元素 3 的宽度为 400px ，可以扩展或收缩。这就保证了每个子元素的布局不会受到其他子元素的影响。
4. 结论
Flexbox 提供了众多属性，其中 Flex Grow 和 Flex Shrink 的作用至关重要，可以让我们更好地控制弹性盒子子元素的扩展和收缩，达到优化布局样式和效果的目的。在实际布局中，应当结合使用 Flex Basic 属性来完善布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ea929e884a3e30f28e7de