如何用JavaScript监听flex-direction变化并调整元素尺寸？

这里有几个实用的方案，按推荐优先级排序：

1. 纯CSS方案（最优） #

不需要JavaScript监听或触发，通过类选择器直接关联flex方向和子元素样式：

/* 基础容器样式 */
.flex-container {
  display: flex;
  gap: 10px;
  overflow: auto;
}

/* 纵向布局时的子元素样式 */
.flex-container.column {
  flex-direction: column;
}
.flex-container.column .flex-item {
  width: 100%;
  height: auto;
}

/* 横向布局时的子元素样式 */
.flex-container.row {
  flex-direction: row;
}
.flex-container.row .flex-item {
  width: calc(25% - 10px); /* 按需求调整比例 */
  height: 100%;
}

切换方向时只需要给容器添加/移除对应的类（比如row或column），CSS会自动适配子元素尺寸，完全不需要额外的尺寸调整逻辑。

2. 手动触发尺寸调整（可控性高） #

既然切换flex-direction的操作是由你的代码触发的（比如按钮点击），直接在切换完成后调用尺寸调整函数即可：

// 切换flex方向的函数
function toggleFlexLayout() {
  const container = document.querySelector('.flex-container');
  container.classList.toggle('row');
  
  // 切换完成后立即调整子元素尺寸
  adjustFlexItems(container);
}

// 尺寸调整逻辑
function adjustFlexItems(container) {
  const isRowLayout = container.classList.contains('row');
  const items = container.querySelectorAll('.flex-item');
  
  items.forEach(item => {
    if (isRowLayout) {
      item.style.width = 'calc(25% - 10px)';
    } else {
      item.style.width = '100%';
    }
  });
}

这种方法逻辑简单，不需要额外监听，性能也更好。

3. MutationObserver监听样式变化（适合不可控的样式修改） #

如果flex-direction的修改不是由你的代码触发的（比如第三方组件、动态样式注入），可以用MutationObserver监听容器的样式变化：

const container = document.querySelector('.flex-container');
let currentDirection = getComputedStyle(container).flexDirection;

// 创建观察者实例
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'style') {
      const newDirection = getComputedStyle(container).flexDirection;
      // 仅当方向真正变化时执行调整
      if (newDirection !== currentDirection) {
        currentDirection = newDirection;
        adjustFlexItems(newDirection);
      }
    }
  });
});

// 启动监听，只监听style属性变化
observer.observe(container, {
  attributes: true,
  attributeFilter: ['style']
});

// 尺寸调整逻辑
function adjustFlexItems(direction) {
  const items = document.querySelectorAll('.flex-item');
  items.forEach(item => {
    item.style.width = direction === 'row' ? 'calc(25% - 10px)' : '100%';
  });
}

这个方案可以捕获所有样式属性的变化，但注意不要过度使用，避免性能损耗。

内容的提问来源于stack exchange，提问作者McMurphy