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

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

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

代码：

<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>

.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; */
}