如何将当前水平布局的Flexbox手风琴重新设计为垂直布局？

要把这个Flexbox手风琴从水平布局改回垂直布局，核心是调整Flex容器的方向，并适配内容的折叠/展开逻辑，具体步骤如下：

1. 修改外层容器的Flex方向 #

找到手风琴的外层容器（通常类名为.accordion或类似），将其flex-direction从row改为column，让所有手风琴项垂直堆叠：

.accordion {
  display: flex;
  flex-direction: column; /* 切换为垂直排列 */
  width: 100%; /* 确保容器占满可用宽度 */
}

2. 调整内容区域的样式 #

针对你提供的.section-content代码，做如下修改以适配垂直布局的折叠逻辑：

.section-content {
  /* 移除flex:1，避免垂直方向过度拉伸 */
  display: flex;
  align-items: flex-start; /* 内容左对齐，可按需调整为center */
  margin: 0;
  padding: 0 1rem; /* 添加左右内边距优化排版 */
  opacity: 0;
  max-height: 0; /* 折叠时隐藏高度 */
  overflow: hidden; /* 截断超出容器的内容 */
  transition: all .25s .1s ease-out;
}

3. 添加展开状态的样式 #

当点击手风琴标题时，通过给.section-content添加active类来触发展开效果：

.section-content.active {
  opacity: 1;
  max-height: 500px; /* 设置足够容纳内容的高度，可根据实际调整 */
  padding-top: 1rem;
  padding-bottom: 1rem; /* 添加上下内边距，和标题区区分开 */
}

4. 适配交互逻辑（JS部分） #

原水平布局的交互可能是修改宽度或flex占比，现在需要调整为点击标题时给对应.section-content添加/移除active类，示例逻辑如下：

// 假设标题元素类名为.section-title
document.querySelectorAll('.section-title').forEach(title => {
  title.addEventListener('click', () => {
    const content = title.nextElementSibling;
    content.classList.toggle('active');
    // 可选：关闭其他展开的内容
    document.querySelectorAll('.section-content.active').forEach(item => {
      if (item !== content) item.classList.remove('active');
    });
  });
});

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