Flexbox布局下可折叠手风琴侧边栏导致主内容行间距错乱的问题咨询

当前排版异常是Flex布局配置冲突+缺失关键对齐属性共同导致的，和侧边栏状态联动的问题也来自配置漏洞：

• .main_gallery同时配置了width: 80%和flex: 1 1 0，两个宽度计算规则互相冲突，侧边栏内容变化引发的容器高度微调会直接打乱主内容的宽度计算
• 开启flex-wrap: wrap的Flex容器默认align-content: stretch，会把所有包裹的行沿着垂直方向均匀拉伸填满容器高度，这就是看到的“条目少时各行异常分散”的直接原因
• 父级.main-content没有配置垂直对齐规则，侧边栏折叠/展开带来的自身高度变化，会连带把主内容沿着垂直方向拉伸，形成侧边栏状态影响主排版的联动效应

• 清理主内容的冲突宽度规则：删除.main_gallery里冗余的width: 80%，把flex属性改成flex: 1 1 auto，让主内容自动占满侧边栏以外的剩余宽度，消除宽度计算冲突
• 补全多行Flex的垂直对齐规则：给.main_gallery加上align-content: flex-start，强制所有内容行靠容器顶部对齐，从根本上解决行被拉伸分散的问题
• 切断并排模块的垂直联动：
  • 给父级.main-content加align-items: flex-start，禁止侧边栏和主内容在垂直方向互相拉伸适配
  • 给.side-bar加align-self: flex-start，固定侧边栏的垂直对齐位置，它自身展开/收缩的高度变化不会传递给主内容
• 统一控制条目间距：给.main_gallery加gap: 1rem，自动实现行、列间距均匀的效果，不需要手动给每个子项写margin

调整后的核心CSS参考：

.main-content {
  display: flex;
  align-items: flex-start; /* 切断垂直方向的拉伸联动 */
}

.outer-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.main_gallery {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto; /* 删除原有冲突的width:80%配置 */
  justify-content: flex-start;
  align-content: flex-start; /* 解决多行内容垂直分散的核心属性 */
  gap: 1rem; /* 统一控制行列间距 */
}

.side-bar {
  margin-top: .6rem;
  flex: 0 0 12em; /* 保持固定占位宽度，不随内容伸缩 */
  align-self: flex-start; /* 自身不被父容器垂直拉伸 */
  min-height: 0;
}

• 无论侧边栏是完全展开显示所有过滤选项、还是收缩为仅显示折叠按钮，主内容的排版逻辑完全不受影响，宽度始终自动匹配剩余空间
• 哪怕主内容的条目数量远少于容器可容纳量，所有内容都会靠容器顶部对齐，不会出现各行被上下拉开的分散问题
• 所有内容条目之间的行间距、列间距保持完全均匀，符合默认flex-start对齐的预期

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