如何在Flex容器中实现元素的指定换行布局

嘿，我明白你的问题啦——现在你的Flex布局里，第三个元素换行后跑到第一个元素下面去了，你想让它紧跟在第二个元素的正下方对吧？这是因为Flex默认的换行逻辑是按水平主轴依次排列，当一行放不下新元素时，它会自动跳到下一行的最左侧开始布局，刚好第一个元素高度比较高，所以第三个元素就出现在它下方了。

给你两个简单的解决方案，你可以根据自己的场景选：

方案1：把第二、第三个元素打包成一组 #

最简单的思路就是把第二个和第三个元素放在一个子Flex容器里，让它们在组内垂直排列。这样当外层容器宽度不够时，整个组会一起换行到第一个元素的下方，组里的元素自然就是上下挨着的了。

修改后的代码： #

HTML：

<div class="Flex">
  <div class="InnerFlex">
    <p>1st</p>
    <p>1stmore</p>
  </div>
  <!-- 新增一个子容器包裹第二、第三个元素 -->
  <div class="SubFlex">
    <div class="InnerFlex"> 2nd </div>
    <div class="InnerFlex"> 3rd </div>
  </div>
</div>

CSS：

.Flex{ 
  display: flex; 
  flex-wrap: wrap; 
  align-items: flex-start;
  /* 记得删掉你之前给容器加的`flex: 0 0 243px`哦，这个属性是给子元素用的，不是容器的 */
}

.SubFlex {
  display: flex;
  flex-direction: column;
  gap: 2px; /* 可选，给元素之间加个小间距，看起来更舒服 */
}

.InnerFlex{ 
  background: blue; 
  width: 242px; 
  color: white;
  margin: 1px; /* 可选，避免元素之间贴得太近 */
}

.InnerFlex p{ height: 100px; }

方案2：改用Grid布局（更适合这种分组排列需求） #

如果你的布局本来就偏向“列式分组”，那Grid布局会比Flex更直接，它能轻松实现你要的效果：

CSS：

.Flex{ 
  display: grid;
  grid-template-columns: repeat(auto-fit, 242px); /* 自动根据容器宽度适配列数 */
  gap: 2px; /* 元素间的间距 */
  align-items: start;
}

.InnerFlex{ 
  background: blue; 
  color: white;
}

.InnerFlex p{ height: 100px; }

这个方案不需要修改HTML结构，Grid会自动帮你处理：当容器宽度足够时，三个元素在一行；当宽度只能放下两列时，第一个元素占第一列，第二、第三个元素自动挤到第二列并垂直排列；当宽度只能放下一列时，三个元素垂直排列，完全符合你的预期。

补充说明 #

你之前给.Flex容器加的flex: 0 0 243px是个小误区——flex属性是给Flex子元素用的，不是给容器本身的，它会强制容器宽度固定为243px，导致所有子元素只能垂直排列，这可不是你想要的“换行”效果，所以一定要删掉它哦。

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