如何在 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) 的第二個孩子上做了一個“靜態”寬度，然后，他們不能再包裝了，因為它們已經被包裝了。