css flex布局，设置flex-wrap：wrap换行后，如何保证子节点被内容撑高后，每一行的子节点高度一致。

草字2025-09-12 18:23

flex布局，设置flex-wrap：wrap换行后，如何保证子节点被内容撑高后，每一行的子节点高度一致。

核心：需要设置父节点和子节点：align-items: stretch，两个都要。

代码：

javascript 复制代码

<div class="flex-container">
  <div class="flex-item">短内容（一行）</div>
  <div class="flex-item">中等内容，可能会换行形成两行</div>
  <div class="flex-item">很长的内容，会换行多次，这是导致高度增加的关键内容，需要其他行跟它保持一致</div>
  <div class="flex-item">短内容</div>
  <div class="flex-item">另一行短内容</div>
  <div class="flex-item">中等长度内容</div>
</div>

javascript 复制代码

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  align-items: stretch; /* 同一行内元素高度一致 */
  gap: 10px;
  width: 100%;
  /* 关键：不设置固定高度，让容器由内容自然撑开（最高行决定总高度） */
}

.flex-item {
  flex: 0 0 calc(33.33% - 10px); /* 三列布局 */
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  
  /* 核心：强制所有子元素最小高度与最高元素一致 */
  /* 方法1：通过 min-height 配合内容自适应（推荐） */
  min-height: 100%;
  
  /* 方法2：若知道最高行高度，可直接固定高度（适用于内容可控场景） */
  /* height: 200px; */
}