引入
在制作响应式网页时，我们常常使用 CSS Flexbox 布局来实现灵活性高的排版。Flexbox 布局中的 flex-grow 和 flex-shrink 属性可以帮助我们动态控制元素的宽度，使页面在不同宽度的设备上，能够自适应调整样式，达到更好的用户体验。本文将详细介绍如何在 Flexbox 布局中使用 JavaScript 动态地控制 flex-grow 和 flex-shrink 属性。
理解 flex-grow 和 flex-shrink 属性
在介绍如何动态控制 flex-grow 和 flex-shrink 属性之前，我们先来回顾一下它们的含义和用法。
flex-grow 属性定义了元素在容器中可以伸展的比例，它的默认值为 0，即元素不会伸展。如果将值设置为 1，则表示元素可以按比例伸展以填满剩余空间，如果将值设置为 2，则表示元素可以按照比例的两倍伸展。
flex-shrink 属性定义了元素在容器中收缩的比例，它的默认值为 1，即当容器不足以放置所有元素时，所有元素会等比例缩小。如果将值设置为 0，则表示元素不会缩小。如果将值设置为 2，则表示元素将比其他元素缩小得更快。
动态控制 flex-grow 和 flex-shrink 属性
有时候我们需要动态控制元素的尺寸，以便在不同的设备宽度下，页面可以达到最佳的展示效果。在这种情况下，我们可以通过 JavaScript 动态地改变元素的 flex-grow 和 flex-shrink 属性来实现。
通过 JavaScript 定义样式
我们可以通过定义 CSS 类来控制元素的 flex-grow 和 flex-shrink 属性，然后通过 JavaScript 动态地改变元素的 class 名称，从而实现改变属性的效果。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- -- - ---------------- - ---------- -- - ---------------- - ------------ -- -
在 JS 代码中，我们可以通过查询 DOM 来获取元素，然后添加或移除 class 名称来改变属性。
// 获取元素
const item = document.querySelector('.flex-item');
// 添加 class 名称
item.classList.add('large');
// 移除 class 名称
item.classList.remove('small');通过 JavaScript 直接修改样式
使用上面的方法，我们需要在 CSS 中编写多个不同的类，然后在 JavaScript 中进行切换。另外一种方法是直接动态设定 style 属性。
// 获取元素
const item = document.querySelector('.flex-item');
// 修改 flex-grow 属性
item.style.flexGrow = 1; // 1 可以修改成任意数值
// 修改 flex-shrink 属性
item.style.flexShrink = 0; // 0 或 1示例代码
下面是一个简单的示例代码，它演示了如何使用 JavaScript 动态控制 Flexbox 布局中的 flex-grow 和 flex-shrink 属性。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------------
-------
--------------- -
-------- -----
------- ------
----------------- --------
-
---------- -
------- ----
----------------- --------
------- -----
------ ------
----------- -------
---------- -----
-
----------------- -
---------- --
-
------------------ -
------------ --
-
--------
-------
------
----------- -------------
-----------------------
---- -----------------------
---- ------------------
--------------
------
---- ------------------
--------------
------
---- ------------------
--------------
------
---- ------------------
--------------
------
------
------- ------------------------------
------- ----------------------------------
--------
-------- ------ -
----- ----- - ----------------------------------------
---------------------------------
------------------------------------
-
-------- -------- -
----- ----- - ----------------------------------------
-------------------------------------
----------------------------------
-
---------
-------
-------以上代码中通过添加类名 larger 和 smaller，来改变 flex-grow 和 flex-shrink 属性。通过 grow() 和 shrink() 这两个按钮来控制每个元素的尺寸。当我们点击 Grow 按钮时，第一个元素会变大，而第二个元素会变小。当我们点击 Shrink 按钮时，第一个元素会变小，而第二个元素会变大。
总结
在本文中，我们了解了 flex-grow 和 flex-shrink 属性的作用、用法，以及如何使用 JavaScript 动态控制这些属性。通过这些方法，我们可以在 Flexbox 布局中制作自适应的页面，使页面在不同的设备上都能够最佳地展示。希望这篇文章可以对你的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f355e7d4982a6eb047bc9