如何在Flexbox布局中实现点击展开且无偏移的折叠面板

我有一个可自动换行的Flexbox图片布局，希望点击图片时，在该图片所在行与下一行之间显示信息，且不移动“列”。当前遇到的问题：

• 不给文本加position: absolute时，flex-item尺寸变化会导致列偏移；
• 加了position: absolute后，文本会和下一行内容重叠。

推荐用CSS Grid实现，它能更精准控制元素布局，完美解决列偏移和内容重叠问题：

1. 调整HTML结构 #

将文本元素从单个图片容器中移出，直接放在网格容器内，与对应图片相邻：

<div class="grid-container">
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  <div class="rectangle"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

2. 设置Grid布局样式 #

让容器自动适配列数，图片固定宽度，文本元素占据整行：

.grid-container {
  display: grid;
  /* 自动生成列，每列固定200px */
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 10px;
  justify-content: center;
}

.rectangle {
  width: 200px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}

.text {
  display: none;
  /* 文本占据当前行的所有列 */
  grid-column: 1 / -1;
  margin: 5px 0;
}

3. 调整交互逻辑 #

点击图片时，切换相邻文本的显示状态：

const rectangles = document.querySelectorAll(".rectangle");
rectangles.forEach(rect => {
  rect.addEventListener("click", function() {
    const content = this.nextElementSibling;
    content.style.display = content.style.display === "block" ? "none" : "block";
  });
});

方案优势 #

• 图片固定宽度+Grid自动列布局，保证列不会偏移；
• 文本占据整行，显示时会自动将下方元素向下推，完全避免重叠；
• 结构和逻辑简单，易维护。

如果坚持使用Flexbox，可以给每个flex-item设置flex: 0 0 200px;固定宽度，然后通过JS计算当前图片所在行的最后一个元素，将文本插入到该行末尾（设置width: 100%;），但这种方法需要额外处理行的判断，实现成本更高。

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