如何在 CSS Flexbox 布局中动态的控制子元素 flex-grow 和 flex-shrink 属性？-JavaScript中文网-JavaScript教程资源分享门户

引入

在制作响应式网页时，我们常常使用 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 名称，从而实现改变属性的效果。

// javascriptcn.com 代码示例
.flex-item {
  display: flex;
  flex-grow: 1;
}

.flex-item.large {
  flex-grow: 2;
}

.flex-item.small {
  flex-shrink: 0;
}

在 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 属性。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flexbox 布局动态控制属性</title>
  <style>
    .flex-container {
      display: flex;
      height: 300px;
      background-color: #f1f1f1;
    }

    .flex-item {
      height: 50%;
      background-color: #4CAF50;
      margin: 10px;
      color: white;
      text-align: center;
      font-size: 30px;
    }

    .flex-item.larger {
      flex-grow: 2;
    }

     .flex-item.smaller {
      flex-shrink: 0;
    }
  </style>
</head>
<body>
  <h2>Flexbox 布局动态控制属性</h2>
  <p>点击下方按钮控制每个项目的尺寸。</p>
  <div class="flex-container">
    <div class="flex-item">
      <span>1</span>
    </div>
    <div class="flex-item">
      <span>2</span>
    </div>
    <div class="flex-item">
      <span>3</span>
    </div>
    <div class="flex-item">
      <span>4</span>
    </div>
  </div>
  <button onclick="grow()">Grow</button>
  <button onclick="shrink()">Shrink</button>
  <script>
    function grow() {
      const items = document.querySelectorAll('.flex-item');
      items[0].classList.add('larger');
      items[1].classList.remove('larger');
    }
    
    function shrink() {
      const items = document.querySelectorAll('.flex-item');
      items[0].classList.remove('smaller');
      items[1].classList.add('smaller');
    }
  </script>
</body>
</html>

以上代码中通过添加类名 larger 和 smaller，来改变 flex-grow 和 flex-shrink 属性。通过 grow() 和 shrink() 这两个按钮来控制每个元素的尺寸。当我们点击 Grow 按钮时，第一个元素会变大，而第二个元素会变小。当我们点击 Shrink 按钮时，第一个元素会变小，而第二个元素会变大。

总结

在本文中，我们了解了 flex-grow 和 flex-shrink 属性的作用、用法，以及如何使用 JavaScript 动态控制这些属性。通过这些方法，我们可以在 Flexbox 布局中制作自适应的页面，使页面在不同的设备上都能够最佳地展示。希望这篇文章可以对你的前端开发有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f355e7d4982a6eb047bc9