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