如何使用Flexbox实现第二个元素后强制换行 后续元素排至下一行

完全可以通过Flexbox实现你需要的效果，最终效果参考：

核心修改逻辑 #

你原有代码缺少两个关键配置：

• 弹性容器默认是不换行的，首先需要给.flex添加flex-wrap: wrap开启换行能力
• 指定在第二个子元素位置强制插入换行分割，让后续元素全部排列到下一行

另外建议给子项添加box-sizing: border-box，避免你设置的width: 33.333%和margin: 10px叠加后超出容器宽度，引发布局错乱。

实现方案 #

方案1：无需修改HTML结构（推荐，现代浏览器全兼容） #

直接通过CSS的break-after属性实现强制换行，不需要改动原有DOM结构，代码量最少。
完整可运行代码：

.flex {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap; /* 开启flex换行 */
  width: 100%;
}

.item {
  background-color: red;
  width: 33.333%;
  min-height: 400px;
  margin: 10px;
  box-sizing: border-box; /* 固定盒模型，避免宽度溢出 */
}

/* 在第二个子元素后强制换行 */
.item:nth-child(2) {
  -webkit-break-after: always; /* 兼容老版本webkit内核浏览器 */
  break-after: always;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

方案2：占位元素实现（兼容性拉满，支持所有Flex兼容浏览器） #

如果需要兼容非常老旧的浏览器（比如IE10/11），可以在第二个子元素后插入一个高度为0、宽度占满整行的占位元素，人为把后续元素挤到下一行，不会额外占用页面垂直空间。
完整代码：

.flex {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  background-color: red;
  width: 33.333%;
  min-height: 400px;
  margin: 10px;
  box-sizing: border-box;
}

/* 换行占位元素样式 */
.break-line {
  flex-basis: 100%;
  height: 0;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <!-- 插入换行占位符 -->
  <div class="break-line"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

两种方案实现的效果完全一致，不管第二个元素后面有多少个子元素，都会统一排列到下一行展示。

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