為什麼 Flex 項目子項目上的百分比填充會破壞父 Flex 容器？

為什麼百分比填充會破壞 Flex 項目

考慮一個場景，其中

元素的樣式為彈性項目。在這個
裡面有幾個
• 不是彈性項目的元素。當百分比填滿應用於
• 時，元素，
  元素分成多行。然而，當使用固定填充（例如，30px）時，
  保持在一行上。

  為了理解這種行為，我們深入研究了百分比填充所涉及的計算。填充百分比值與包含區塊的寬度相關。然而，包含塊的寬度是由其內容決定的。

  在這種情況下，

  的寬度是根據其
  • 的含量計算。元素。為了獲得這個寬度，我們使用以下程式碼：

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

    登入後複製

    複雜性在於我們無法在計算寬度之前確定百分比填充值。因此，我們首先根據內容計算寬度。

    因此，當使用百分比填充時，瀏覽器很難確定包含區塊的寬度，從而導致多行行為。相反，使用固定填充，寬度是明確定義的，消除了這個問題。

以上是為什麼 Flex 項目子項目上的百分比填充會破壞父 Flex 容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！