如何在 flex 容器中内联+包装元素及其子元素？

Question

我需要内联显示一些元素，以便它们在填充视口宽度时换行。 我更喜欢使用 flex - 简单且可维护，明确定义的间隙 - 而不是内联或浮动 - 你需要为间隙使用边距，然后使用负边距避免丑陋的包装......

问题是当要对齐的项目嵌套在不同的父母身上时，我无法做到这一点。 我要对齐的标签示例：

• 股利包装：
  • ul 一些相关项目的列表
    • 项目
    • 项目
  • 跨度项不在列表中
  • 跨度项不在列表中

我附上了一个演示，其中结构重复了 3 次，每次都提供更小的宽度来展示项目的包装方式。 ul 表现得非常像一个内联元素，直到它必须换行，然后它表现得像一个块元素。

 div { border: 1px solid blue; /* for easier debugging */ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; /* just visual separation between the 3 examples */ } div:nth-of-type(2) { max-width: 450px; /* stretcher just to show how items wrap */ } div:nth-of-type(3) { max-width: 250px; /* stretcher just to show how items wrap */ } ul { border: 1px solid green; /* for easier debugging */ display: inline-flex; flex-wrap: wrap; gap: 20px; } li, span { border: 1px solid red; /* for easier debugging */ display: inline; }

 <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> <:-- structure repeats 3 times --> <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>The UL pushed next inline elements to a new line :(</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>

Answer 1

在 ul 元素上使用 display:contents 属性，这允许将子元素视为父容器的直接子元素。

ul {
    display: contents;
}

也可以在 li 和 span 元素上使用 display: inline-block 而不是 display: inline ，这允许它们有自己的布局。 您也可以在 ul 上使用 white-space: nowrap 以防止它换行。

li, span {
    display: inline-block;
}

ul {
    white-space: nowrap;
}

Answer 2

 * { /* just for reset and for remove all margins and paddings */ box-sizing: border-box; margin: 0; padding: 0; } div { border: 1px solid blue; /* for easier debugging */ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; /* just visual separation between the 3 examples */ } div:nth-of-type(2) { max-width: 450px; /* stretcher just to show how items wrap */ } div:nth-of-type(3) { /* max-width: 250px; */ max-width: fit-content; /* is like 488px, but is resizable*/ /* you wrong, the ul by default doesn't push to next line any elements, you have did a static width of maximum 250px...*/ /* stretcher just to show how items wrap */ } ul { border: 1px solid green; /* for easier debugging */ display: inline-flex; flex-wrap: wrap; gap: 20px; } li, span { border: 1px solid red; /* for easier debugging */ display: inline; }

 <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> <:-- structure repeats 3 times --> <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>The UL pushed next inline elements to a new line :(</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>

你已经在 max(250px) 的第二个孩子上做了一个“静态”宽度，然后，他们不能再包装了，因为它们已经被包装了。