為什麼絕對定位的 Flex 專案會影響 IE11 中的佈局？

IE11 中正常流中包含的絕對定位Flex 項目

在Flexbox 佈局中，元素根據其元素排列在行或列中彈性屬性。但是，當 Flexbox 中的元素絕對定位時，它就會變成流外元素，不應參與佈局。

在提供的程式碼範例中：

<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

“.bg”div 是絕對定位的。儘管如此，在 IE11 中，Flex 專案之間的空間分佈就像「.bg」div 是正常流的一部分一樣。這是與 Flexbox 規格的偏差。

解決方法：

要解決此問題，一種解決方法是在另一個之間移動絕對定位的「.bg」div兩個Flex 專案：

<div class="container">
  <div class="c1">Content 1</div>
  <div class="bg">Background</div>
  <div class="c2">Content 2</div>
</div>

透過此結構更改，「.bg」div 不再影響Flex 之間的空間分佈項目，並實現所需的佈局。

以上是為什麼絕對定位的 Flex 專案會影響 IE11 中的佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！