Flexbox 是一种新的 CSS 布局方式，它为前端开发人员提供了更加灵活的布局方式。通过使用 Flexbox，可以实现弹性的容器和项目，并让它们能够自由地变化和适应不同的屏幕大小和设备类型。
在 Flexbox 中，可以通过设置 flex-grow 和 flex-shrink 属性来控制元素的可伸缩比例。这两个属性都是用于定义元素的弹性增长和弹性缩小能力。
flex-grow 属性
flex-grow 属性定义了元素在容器内的弹性增长能力。默认情况下，所有元素的 flex-grow 属性值都为 0，这意味着它们不会自动拉伸以填充空间。
当需要在容器中增加一个元素的宽度时，可以设置 flex-grow 属性来控制元素的增长比例。例如，在以下示例中，我们创建了一个带有三个子元素的 div 容器：
<div style="display: flex;"> <div style="background-color: red;"></div> <div style="background-color: green;"></div> <div style="background-color: blue;"></div> </div>
如果我们希望第一个元素（红色元素）在容器中自动拉伸以填充剩余的空间，可以将其 flex-grow 属性值设置为 1：
<div style="display: flex;"> <div style="background-color: red; flex-grow: 1;"></div> <div style="background-color: green;"></div> <div style="background-color: blue;"></div> </div>
这时，第一个元素就会根据容器的剩余空间自动拉伸，直到填充容器。其他两个元素仍然保持原有的宽度。
如果我们将第一个元素的 flex-grow 属性值设置为更大的数字，如 2，那么它将比其他两个元素更容易增长：
<div style="display: flex;"> <div style="background-color: red; flex-grow: 2;"></div> <div style="background-color: green;"></div> <div style="background-color: blue;"></div> </div>
在这种情况下，第一个元素将比其他两个元素更容易增长，并且在容器宽度发生变化时，也会根据其相对比例自适应变化。
flex-shrink 属性
与 flex-grow 属性相反，flex-shrink 属性用于定义元素在容器内的弹性缩小能力。默认情况下，元素的 flex-shrink 属性值为 1，这意味着它们可以缩小以适应空间。
当容器的宽度小于所有项目的总宽度时，元素会根据其 flex-shrink 属性值缩小。例如，在以下示例中，我们创建了一个相同的带有三个子元素的 div 容器，并将它们的宽度设置为固定值：
<div style="display: flex;"> <div style="background-color: red; width: 200px;"></div> <div style="background-color: green; width: 200px;"></div> <div style="background-color: blue; width: 200px;"></div> </div>
如果我们将容器的宽度设置为 600px，那么每个元素的宽度都将保持为 200px：
<div style="display: flex; width: 600px;"> <div style="background-color: red; width: 200px;"></div> <div style="background-color: green; width: 200px;"></div> <div style="background-color: blue; width: 200px;"></div> </div>
但是，如果我们将容器的宽度设置为 500px，并将第一个元素的 flex-shrink 属性值设置为 2，那么它将比其他元素更容易缩小：
<div style="display: flex; width: 500px;"> <div style="background-color: red; width: 200px; flex-shrink: 2;"></div> <div style="background-color: green; width: 200px;"></div> <div style="background-color: blue; width: 200px;"></div> </div>
在这种情况下，第一个元素的宽度将缩小为 167px，而其他两个元素的宽度将缩小为 166px。这是因为第一个元素的 flex-shrink 属性值比其他元素更大，因此它相对于其他元素更容易缩小。
总结
在 Flexbox 布局中，通过设置 flex-grow 和 flex-shrink 属性，可以控制元素的可伸缩比例。flex-grow 属性控制了元素在容器内的弹性增长能力，而 flex-shrink 属性则控制了元素在容器内的弹性缩小能力。
通过使用这些属性，可以使元素根据容器的大小和其他因素自适应变化，从而实现更加灵活和可维护的布局方案。
示例代码
下面是一个完整的示例代码，它展示了如何使用 flex-grow 和 flex-shrink 属性来控制元素的可伸缩比例：
<div style="display: flex; width: 500px;"> <div style="background-color: red; width: 200px; flex-grow: 2; flex-shrink: 1;"></div> <div style="background-color: green; width: 200px; flex-grow: 1; flex-shrink: 1;"></div> <div style="background-color: blue; width: 200px; flex-grow: 1; flex-shrink: 2;"></div> </div>
在这个示例中，第一个元素的 flex-grow 属性值为 2，flex-shrink 属性值为 1；第二个元素的 flex-grow 属性值为 1，flex-shrink 属性值为 1；第三个元素的 flex-grow 属性值为 1，flex-shrink 属性值为 2。
这些属性值的不同组合将会影响元素在容器中的可伸缩比例，从而实现更加灵活和可预测的布局方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae72f848841e9894a82c6a