如何正确应用flex-wrap实现不同层级span元素按预期自适应换行

你当前代码出现整块换行的核心原因是：flex-wrap的换行计算只针对当前flex容器的直接子元素生效。你给嵌套的.parent-2设置了display: inline-flex后，它本身会被外层.parent识别为一个独立、不可拆分的弹性子项：只要这个子项的整体宽度超过第一行剩余空间，它包含的所有内容就会整体换到第二行，父容器不会穿透到.parent-2内部，拆分它里面的span元素和前面的"Price:"挤在同一行。

根据你的适配需求，选以下任意一种方案即可：

• 方案1（最小代码改动，推荐）
  给.parent-2设置display: contents属性，这个属性会让.parent-2自身不生成独立的排版盒子，它内部的3个span会直接成为外层.parent弹性容器的直接子项，统一参与父容器的换行计算：当前行剩多少空间就放多少个span，放不下的自动换行到下一行。
  修正后的完整代码如下：

  .parent {
    width: 200px;
    display: inline-flex;
    flex-wrap: wrap;
    /* 可选：用gap统一控制元素间距，比硬写 更灵活适配不同端 */
    gap: 0.5em;
  }
  
  .parent-2 {
    /* 移除原来的inline-flex设置，替换为contents */
    display: contents;
  }
  

  <div class="parent">
    <span class="parent-1">Price:</span>
    <div class="parent-2">
      <span>Sale</span>
      <span>Regular</span>
      <span>Unit</span>
    </div>
  </div>
  

• 方案2（兼容低版本浏览器，无兼容问题）
  如果需要兼容不支持display: contents的老旧浏览器，可以直接调整DOM结构，删掉.parent-2这层多余包裹，把所有span都作为.parent的直接子元素，这样所有span天然就是父flex容器的直接子项，会自动按剩余空间换行：

  <div class="parent">
    <span>Price:</span>
    <span>Sale</span>
    <span>Regular</span>
    <span>Unit</span>
  </div>
  

  父容器的CSS保持原来的display: inline-flex; flex-wrap: wrap;设置即可。

注意：不要给需要参与统一换行的元素外层再加独立的flex/block/inline-block容器，否则外层容器会把这些元素打包成一个不可拆分的整体，无法实现逐元素换行的效果。

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