动态修改Flex布局元素属性的JavaScript方法

Flex布局是现代Web开发中常用的布局方式，通过JavaScript可以动态修改Flex容器的属性及其子元素的属性。以下是几种常用的方法：

1. 修改Flex容器属性

// 获取Flex容器
const flexContainer = document.getElementById('flex-container');

// 修改flex-direction
flexContainer.style.flexDirection = 'column'; // 可选: row, row-reverse, column, column-reverse

// 修改justify-content
flexContainer.style.justifyContent = 'space-between'; // 可选: flex-start, flex-end, center, space-between, space-around, space-evenly

// 修改align-items
flexContainer.style.alignItems = 'center'; // 可选: stretch, flex-start, flex-end, center, baseline

// 修改flex-wrap
flexContainer.style.flexWrap = 'wrap'; // 可选: nowrap, wrap, wrap-reverse

// 修改align-content (多行时才有效)
flexContainer.style.alignContent = 'space-around'; // 可选: flex-start, flex-end, center, space-between, space-around, stretch

2. 修改Flex子元素属性

// 获取Flex子元素
const flexItem = document.getElementById('flex-item');

// 修改order
flexItem.style.order = '2'; // 数值，默认0

// 修改flex-grow
flexItem.style.flexGrow = '1'; // 数值，默认0

// 修改flex-shrink
flexItem.style.flexShrink = '0'; // 数值，默认1

// 修改flex-basis
flexItem.style.flexBasis = '200px'; // 长度值或auto

// 简写flex属性
flexItem.style.flex = '1 0 auto'; // 相当于 flex-grow: 1; flex-shrink: 0; flex-basis: auto;

// 修改align-self
flexItem.style.alignSelf = 'flex-end'; // 可选: auto, flex-start, flex-end, center, baseline, stretch

3. 动态切换Flex类

更推荐的做法是预先定义CSS类，然后通过JavaScript切换类：

/* CSS */
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item-grow {
  flex-grow: 1;
}

// JavaScript切换类
const container = document.getElementById('container');
container.classList.remove('flex-row');
container.classList.add('flex-column');

const item = document.getElementById('item');
item.classList.toggle('flex-item-grow');

4. 响应式修改Flex属性

// 根据窗口大小动态修改Flex属性
function updateFlexLayout() {
  const container = document.getElementById('container');
  if (window.innerWidth < 768) {
    container.style.flexDirection = 'column';
  } else {
    container.style.flexDirection = 'row';
  }
}

// 初始调用
updateFlexLayout();

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

5. 使用CSS变量动态控制

:root {
  --flex-direction: row;
  --flex-justify: flex-start;
}

.flex-container {
  display: flex;
  flex-direction: var(--flex-direction);
  justify-content: var(--flex-justify);
}

// 通过修改CSS变量来改变布局
document.documentElement.style.setProperty('--flex-direction', 'column');
document.documentElement.style.setProperty('--flex-justify', 'center');

以上方法可以根据实际需求选择使用，通常推荐使用CSS类和CSS变量的方式，这样可以将样式与逻辑更好地分离。