如何在Flex容器中实现元素及其子元素的内联换行？

问题分析 #

你当前的布局中，外层div是Flex容器，ul和span作为平级的Flex子项存在。当容器宽度不足时，ul内部的li会换行，但ul本身作为独立的布局盒子会占据水平空间，导致后续的span无法与ul内的li在同一行排列，只能被挤到新行。这是因为ul作为Flex子项，始终是一个独立的布局单元，和span属于不同的布局层级。

解决方案 #

使用display: contents属性让ul不生成自身的布局盒子，使其内部的li直接成为外层Flex容器的子元素。这样所有li和span就处于同一个Flex布局上下文，能够实现无缝的换行效果，同时保留原有的HTML结构。

修改后的CSS代码 #

div {
    border: 1px solid blue; /* 调试用边框 */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px; /* 示例间的间距 */
}

div:nth-of-type(2) {
    max-width: 450px; /* 测试换行效果 */
}

div:nth-of-type(3) {
    max-width: 250px; /* 测试换行效果 */
}

ul {
    display: contents; /* 关键：让ul的子元素直接成为外层flex的子项 */
    /* 注意：display:contents会使ul的边框失效，如果需要给li组加边框，可以给li统一设置边框或使用其他容器 */
}

li, span {
    border: 1px solid red; /* 调试用边框 */
    flex: 0 1 auto; /* 让元素可以收缩但不拉伸，保持内容宽度 */
}

保留原HTML结构 #

<div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <span>Action 1</span>
  <span>Action 2</span>
  <span>Action 3</span>
</div>

<p>This wraps okay</p>
<div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <span>Action 1</span>
  <span>Action 2</span>
  <span>Action 3</span>
</div>

<p>现在所有元素可以正常换行了 ✅</p>
<div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <span>Action 1</span>
  <span>Action 2</span>
  <span>Action 3</span>
</div>

原理说明 #

display: contents会使元素自身不渲染任何盒子，它的子元素会被提升到父元素的层级中。这样原本被ul包裹的li就和外层的span成为了同级的Flex子项，共享外层Flex容器的flex-wrap和gap设置，自然就能实现所有元素填满视口后自动换行的效果，完全符合你的需求。

兼容性提示 #

该属性支持所有现代浏览器（Chrome、Firefox、Edge 90+、Safari 14.1+），如果需要兼容旧版浏览器，可以考虑通过JavaScript将li移动到外层div中，但display: contents是最简洁且易维护的方案。

内容的提问来源于stack exchange，提问作者Áxel Costas Pena