基于Flex布局实现点击面板切换：单面板放大+其余缩略图左列排列

核心思路 #

通过切换容器和面板的CSS类，结合JavaScript监听点击事件，实现两种布局的无缝切换：

• 默认状态：保留你原本的6面板mosaic布局
• 激活状态：整体容器切换为左侧缩略列+右侧放大面板结构，点击的面板占满右侧空间，其余面板缩小排列在左侧

修改后的完整代码 #

CSS 样式

/* 默认布局样式 */
.horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  min-height: 100vh;
  padding: 1em;
  box-sizing: border-box;
}
.vertical {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  gap: 1em;
}
.box {
  width: 150px;
  height: 100px;
  background-color: #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 激活状态样式 */
.horizontal.active {
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
}
.horizontal.active .vertical {
  flex-direction: column;
  width: 120px;
}
.horizontal.active .box {
  width: 100%;
  height: 80px;
  background-color: #ddd;
}
.horizontal.active .box.active {
  position: absolute;
  left: 140px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  width: auto;
  height: auto;
  background-color: #eee;
  z-index: 10;
}

HTML 结构

（仅给容器添加id方便JS操作，其余结构保持不变）

<div class="horizontal" id="container">
    <div class="vertical">
        <div class="box">A</div>
        <div class="box">B</div>
    </div>
    <div class="vertical">
        <div class="box">C</div>
        <div class="box">D</div>
    </div>
    <div class="vertical">
        <div class="box">E</div>
        <div class="box">F</div>
    </div>    
</div>

JavaScript 逻辑

const container = document.getElementById('container');
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('click', () => {
    // 移除所有面板的激活状态
    boxes.forEach(b => b.classList.remove('active'));
    
    // 切换容器的激活状态（确保进入放大模式）
    container.classList.add('active');
    // 给当前点击的面板添加激活类
    box.classList.add('active');

    // 再次点击已放大的面板，恢复默认布局
    const resetLayout = () => {
      container.classList.remove('active');
      box.classList.remove('active');
      box.removeEventListener('click', resetLayout);
    };
    box.addEventListener('click', resetLayout, { once: true });
  });
});

功能说明 #

1. 点击任意面板：容器立即切换为激活状态，所有面板缩小排列到左侧固定宽度的列中，当前点击的面板放大到右侧近乎全屏的区域
2. 再次点击已放大的面板：直接恢复到最初的6面板mosaic布局
3. 过渡动画：通过transition属性实现布局切换的平滑过渡，避免生硬的样式跳转

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