CSS Flexbox 如何在布局自动换行后插入指定元素

核心思路是提前插入分隔线元素，结合媒体查询和:nth-child选择器，根据不同断点的每行元素数量控制分隔线的显隐，完全不需要JS介入。

前置HTML结构调整 #

在Flex容器内，每两个相邻的布局子元素之间插入一个<hr>标签：

<div class="flex-container">
  <div class="flex-item">布局元素1</div>
  <hr class="row-divider">
  <div class="flex-item">布局元素2</div>
  <hr class="row-divider">
  <div class="flex-item">布局元素3</div>
  <hr class="row-divider">
  <!-- 后续元素和分隔线按相同规则依次插入 -->
  <div class="flex-item">布局元素N</div>
</div>

完整CSS代码 #

/* 容器基础样式 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 可自定义元素间距 */
}

/* 布局子元素基础样式 */
.flex-item {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid #eee;
  /* 移动端默认每行1个 */
  flex-basis: 100%;
}

/* 分隔线基础样式 */
.row-divider {
  /* 默认隐藏，仅在对应断点显示 */
  display: none;
  /* 宽度占满整行，触发换行 */
  flex-basis: 100%;
  height: 1px;
  border: none;
  background: #e5e7eb;
  margin: 4px 0 12px;
}

/* 中等屏幕（≥768px）：每行2个元素 */
@media (min-width: 768px) {
  .flex-item {
    /* 减去gap的一半，保证两个元素刚好占满一行 */
    flex-basis: calc(50% - 8px);
  }
  /* 每2个元素后显示1条分隔线，对应选择第4、8、12...个hr元素 */
  .row-divider:nth-child(4n) {
    display: block;
  }
}

/* 桌面端（≥1200px）：每行3个元素 */
@media (min-width: 1200px) {
  .flex-item {
    /* 减去gap的2/3，保证三个元素刚好占满一行 */
    flex-basis: calc(33.333% - 11px);
  }
  /* 每3个元素后显示1条分隔线，对应选择第6、12、18...个hr元素 */
  .row-divider:nth-child(6n) {
    display: block;
  }
}

补充说明 #

• 如果不需要真实的<hr>DOM节点，也可以用::after伪元素代替插入的<hr>标签，写法和上面的逻辑完全一致，仅需要把.row-divider的选择器替换为伪元素选择器即可。
• 方案适配所有支持Flexbox的浏览器，兼容性覆盖98%以上的全球用户。

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