如何用Flex实现Web端等宽列？纯CSS响应式手风琴列宽异常求助

嘿，我之前也折腾过类似的响应式组件，正好能帮你解决Web端列宽不一致的问题，同时稳稳保留移动端的手风琴交互。下面是一套经过验证的实现方案：

我们用媒体查询区分移动端和桌面端：

• 移动端（比如屏幕宽度<768px）：保留纯CSS手风琴的折叠/展开逻辑，让内容垂直堆叠节省空间
• 桌面端（屏幕宽度≥768px）：用Flex布局替换原来的网格，通过flex: 1让每列强制等宽，同时取消手风琴的折叠效果，让所有内容默认展开

HTML结构 #

<div class="responsive-container">
  <!-- 手风琴面板1 -->
  <div class="accordion-panel">
    <input type="checkbox" id="panel1" class="accordion-toggle">
    <label for="panel1" class="accordion-title">面板1标题</label>
    <div class="accordion-content">
      这里是面板1的内容，不管是短文本还是长段落，在桌面端都会和其他列保持等宽
    </div>
  </div>

  <!-- 手风琴面板2 -->
  <div class="accordion-panel">
    <input type="checkbox" id="panel2" class="accordion-toggle">
    <label for="panel2" class="accordion-title">面板2标题</label>
    <div class="accordion-content">
      面板2的内容可以更长一些，测试Flex等宽效果：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <!-- 手风琴面板3 -->
  <div class="accordion-panel">
    <input type="checkbox" id="panel3" class="accordion-toggle">
    <label for="panel3" class="accordion-title">面板3标题</label>
    <div class="accordion-content">
      面板3内容较短，Flex依然会让它和其他列宽度一致
    </div>
  </div>
</div>

CSS样式 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 移动端手风琴默认样式（屏幕<768px） */
.responsive-container {
  width: 90%;
  margin: 20px auto;
}

.accordion-panel {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.accordion-toggle {
  display: none; /* 隐藏原生复选框 */
}

.accordion-title {
  display: block;
  padding: 15px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.accordion-title:hover {
  background-color: #eee;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: max-height 0.3s, padding 0.3s;
}

/* 勾选复选框时展开内容 */
.accordion-toggle:checked ~ .accordion-content {
  max-height: 500px; /* 足够大的值容纳内容 */
  padding: 15px;
}

/* 桌面端Flex布局（屏幕≥768px） */
@media (min-width: 768px) {
  .responsive-container {
    display: flex;
    gap: 20px; /* 列之间的间距 */
  }

  .accordion-panel {
    flex: 1; /* 关键：每列平分可用空间，实现等宽 */
    min-width: 250px; /* 防止列太窄，可按需调整 */
    margin-bottom: 0;
  }

  /* 桌面端取消手风琴折叠效果，内容始终展开 */
  .accordion-content {
    max-height: unset;
    padding: 15px;
  }

  /* 桌面端隐藏标题的点击样式（可选，因为内容已经展开） */
  .accordion-title {
    cursor: default;
  }

  .accordion-title:hover {
    background-color: #f5f5f5;
  }
}

1. Flex等宽核心：flex: 1是实现等宽的关键，它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;，会让每个.accordion-panel自动平分容器的可用宽度，不管内容多少。
2. 手风琴逻辑保留：移动端依然用纯CSS的复选框+相邻兄弟选择器实现折叠，完全不需要JavaScript。
3. 过渡动画：加入transition属性让展开/折叠和布局切换更平滑，提升用户体验。
4. 最小宽度限制：桌面端给.accordion-panel加min-width，防止屏幕过窄时列被压缩得太难看，可根据你的设计需求调整数值。

• 可以根据你的设计调整媒体查询的断点（比如把768px改成1024px），适配不同的设备尺寸。
• 如果内容特别长，桌面端可以给.accordion-content加overflow-y: auto，避免列高度过高。
• 样式（颜色、间距、边框等）可以根据你的项目风格自定义，上面的代码只是基础模板。

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