js实现flex grow

Flex Grow 的实现

在 JavaScript 中实现 flex-grow 的效果，可以通过直接操作 DOM 元素的 style 属性或使用 CSS 类来控制。以下是几种常见方法：

直接设置 style 属性

通过 JavaScript 动态设置元素的 flex-grow 属性：

const element = document.getElementById('flexItem');
element.style.flexGrow = '2'; // 设置 flex-grow 值为 2

动态添加 CSS 类

定义一个 CSS 类，并通过 JavaScript 动态添加或移除：

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

const element = document.getElementById('flexItem');
element.classList.add('flex-grow-2');

批量设置多个子元素的 flex-grow

通过遍历子元素并分配不同的 flex-grow 值：

const container = document.getElementById('flexContainer');
const children = container.children;
Array.from(children).forEach((child, index) => {
  child.style.flexGrow = index + 1; // 分配递增的 flex-grow 值
});

响应式调整 flex-grow

根据窗口大小或其他条件动态调整 flex-grow：

window.addEventListener('resize', () => {
  const element = document.getElementById('flexItem');
  if (window.innerWidth > 768) {
    element.style.flexGrow = '3';
  } else {
    element.style.flexGrow = '1';
  }
});

注意事项

• flex-grow 是 Flexbox 布局的一部分，需确保父容器设置了 display: flex。
• 直接操作 style 属性会覆盖内联样式，优先考虑使用 CSS 类。
• 使用 classList 方法可以更方便地管理多个 CSS 类。