如何在响应式flex容器每行子元素间加分隔符？有无纯CSS方案？

完全可以不用JavaScript，仅通过CSS就能实现你要的效果，核心是利用相邻兄弟选择器和伪元素来精准控制分隔符的出现位置。

完整实现代码 #

<style>
  #container {
    display: flex;
    flex-flow: row wrap;
    gap: 0.6em; /* 可选：统一元素间的基础间距 */
  }

  #container div + div::before {
    content: "•";
    margin: 0 0.6em; /* 控制分隔符与前后元素的距离 */
    white-space: nowrap; /* 避免分隔符被单独拆到新行 */
    flex-shrink: 0; /* 防止分隔符被压缩 */
  }
</style>
<div id="container">
  <div>Apple</div>
  <div>Banana</div>
  <div>Cherry</div>
  <div>Durian</div>
  <div>Mango</div>
  <div>Pear</div>
</div>

关键原理 #

• 精准选择目标元素：div + div::before只会选中「紧跟在另一个子元素之后的子元素」，也就是每行里除第一个元素外的所有元素，从根源上避免首尾出现分隔符。
• 分隔符样式控制：
  • content: "•"定义分隔符内容；
  • white-space: nowrap确保分隔符和它所属的子元素始终在同一行，不会出现单独一行只有•的异常情况；
  • flex-shrink: 0保证分隔符不会因为容器空间不足被压缩变形；
• 自适应换行兼容：flex布局的row wrap特性会自动根据容器宽度换行，而相邻兄弟选择器会自动适配每行的元素结构，换行后的第一行元素不会触发div + div的选择条件，自然不会在开头出现分隔符。

效果展示 #

• 全屏单行：Apple • Banana • Cherry • Durian • Mango • Pear
• 宽度减半两行：

  Apple • Banana • Cherry
  Durian • Mango • Pear
  

• 最小宽度三行：

  Apple • Banana
  Cherry • Durian
  Mango • Pear
  

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