為什麼百分比填充會破壞 Flexbox 佈局？

為何百分比填充會破壞 Flex 項目行為

Flexbox 佈局旨在沿軸均勻分佈項目。但是，當對 Flex 項目（Flex 容器中包含的非 Flex 元素）套用百分比填充時，容器的佈局可能會被破壞。

在此範例中，我們有一個 Flex 容器 (

)，其中包含幾個非彈性項目 (
• )。當百分比填充應用於各個
• 時，元素，容器被分成多行：

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

  登入後複製

  但是，當使用固定填充時（例如，padding: 0 30px），容器保持在單行中。

  說明：

  百分比填充的行為是由於計算過程造成的 涉及。填充是相對於包含區塊的寬度確定的。該寬度最初是未知的，必須根據內容或任何固定寬度值進行計算。

  在百分比填充的情況下，寬度計算發生在應用填充之後。因此，容器的寬度在考慮填充的情況下進行調整，導致計算不正確。這會導致項目分佈不均勻並破壞彈性容器的佈局。

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