JavaScript 结合 Flex 布局深度解析

2. 响应式控制 Flex 项目尺寸

结合窗口大小监听（resize 事件），可动态调整 Flex 项目的 flex 属性，实现不同屏幕下的布局适配，比纯 CSS 媒体查询更灵活（支持自定义触发条件）。

示例代码：

const flexItems = document.querySelectorAll('.flex-item');

// 监听窗口大小变化
window.addEventListener('resize', adjustFlexItems);

// 初始化执行
adjustFlexItems();

function adjustFlexItems() {
  const windowWidth = window.innerWidth;
  // 大屏：项目等分剩余空间
  if (windowWidth >= 1200) {
    flexItems.forEach(item => {
      item.style.flex = '1 1 auto';
    });
  }
  // 中屏：项目固定基础尺寸，不收缩
  else if (windowWidth >= 768) {
    flexItems.forEach(item => {
      item.style.flex = '0 0 200px';
    });
  }
  // 小屏：项目占满容器宽度，垂直排列
  else {
    flexItems.forEach(item => {
      item.style.flex = '0 0 100%';
    });
    document.getElementById('flex-container').style.flexDirection = 'column';
  }
}

3. 交互驱动的 Flex 项目排序

通过用户操作（如点击、拖拽），动态修改 Flex 项目的 order 属性，实现排序交互，常见于列表重排、筛选结果展示等场景。

示例代码：

// 按价格排序 Flex 项目（假设项目有 data-price 属性）
function sortItemsByPrice() {
  const flexContainer = document.getElementById('flex-container');
  const items = Array.from(flexContainer.querySelectorAll('.flex-item'));
  
  // 按价格升序排序
  const sortedItems = items.sort((a, b) => {
    return a.dataset.price - b.dataset.price;
  });
  
  // 重新设置 order 属性
  sortedItems.forEach((item, index) => {
    item.style.order = index;
  });
}

// 绑定点击事件
document.getElementById('sort-btn').addEventListener('click', sortItemsByPrice);

4. 动态添加 / 删除 Flex 项目后的布局适配

当通过 JS 动态增删 Flex 项目时，Flex 容器会自动重排，但可通过 JS 补充逻辑（如项目数量变化时调整对齐方式、尺寸），保证布局一致性。

示例代码：

const flexContainer = document.getElementById('flex-container');

// 添加 Flex 项目
function addFlexItem(price) {
  const newItem = document.createElement('div');
  newItem.className = 'flex-item';
  newItem.dataset.price = price;
  newItem.textContent = `商品 ${price} 元`;
  flexContainer.appendChild(newItem);
  
  // 添加后重新调整布局
  adjustJustifyContent(flexContainer.children.length);
}

// 删除最后一个项目
function removeLastItem() {
  if (flexContainer.children.length > 0) {
    flexContainer.removeChild(flexContainer.lastChild);
    adjustJustifyContent(flexContainer.children.length);
  }
}

三、Flex 布局 + JavaScript 的最佳实践

1. 优先使用 CSS 处理基础布局，JS 负责动态交互

Flex 布局的核心优势是原生 CSS 带来的性能优化，因此基础布局（如默认对齐、固定断点的适配）应优先用 CSS 实现；JS 仅用于处理'交互驱动''动态条件判断'的布局变化，避免过度依赖 JS 操作样式。

2. 避免频繁操作 DOM 样式

频繁修改 Flex 相关样式会触发浏览器重排（Reflow），影响性能。可通过以下方式优化：

• 批量修改样式（如先收集所有样式变更，一次性应用）；
• 使用 CSS 类名切换替代直接修改行内样式（将 Flex 属性定义在 CSS 类中，JS 仅切换类名）。

优化示例：

/* CSS 定义类名 */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

// JS 仅切换类名
function switchDirection() {
  const container = document.getElementById('flex-container');
  container.classList.toggle('flex-row');
  container.classList.toggle('flex-column');
}

3. 结合 ResizeObserver 替代 resize 事件

传统 resize 事件会频繁触发，而 ResizeObserver 可监听元素尺寸变化，精准触发布局调整，性能更优，尤其适合局部容器的响应式适配。

示例代码：

const observer = new ResizeObserver(entries => {
  const container = entries[0].target;
  const containerWidth = entries[0].contentRect.width;
  
  // 根据容器宽度调整布局
  if (containerWidth < 500) {
    container.classList.add('flex-column');
  } else {
    container.classList.remove('flex-column');
  }
});

// 监听 Flex 容器尺寸变化
observer.observe(document.getElementById('flex-container'));

四、总结

Flex 布局凭借其灵活的空间分配、简洁的对齐控制，成为前端布局的首选方案；而 JavaScript 则为 Flex 布局赋予了'动态交互'的能力，实现了从'静态布局'到'智能布局'的升级。在实际开发中，合理结合两者的优势 —— 用 CSS 构建 Flex 布局的基础框架，用 JS 处理动态交互和个性化适配，既能保证布局的性能和可维护性，又能满足复杂的业务交互需求。

无论是移动端适配、动态列表布局，还是自定义排序交互，Flex + JavaScript 的组合都能大幅提升开发效率，让前端布局更简洁、更灵活、更贴近用户需求。掌握这一组合，将为你的前端开发能力带来质的飞跃。