為什麼 Flex 項目在使用百分比填滿時會換行？

為什麼應用百分比填充時 Flex 項目會分割？

考慮一個場景，其中

元素（一個 Flex 項目）包含多個非 Flex
• 元素。元素。當百分比填充應用於
• 時，元素，
  容器跨多行拆分。然而，當使用固定填充時，情況並非如此。

  說明

  當使用百分比填充時，它是相對於包含塊的寬度，在這種情況下，

  ul>。問題是由於在確定容器寬度之前無法解決百分比填充的問題。

  如果沒有固定填充，瀏覽器會根據其內容計算

  的寬度。然後應用百分比填充，導致容器變得更寬，不再適合所有的
  • 元素。

  Beispiel

  li {
    display: inline-block;
    padding: 0 5%; /* Percentage padding */
    border: 1px solid black;
  }
  
  header {
    display: flex;
  }
  
  ul {
    border:1px solid red;
  }

  為了更好地說明此行為，請考慮以下程式碼：

  console.log(document.querySelector('ul').offsetWidth);

  如果我們在控制台中執行以下JavaScript，我們將可以看到的寬度應用填充後：
  這將輸出
  的寬度應用百分比填充後。

以上是為什麼 Flex 項目在使用百分比填滿時會換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！