絶対配置された Flex アイテムが IE11 のレイアウトに影響を与えるのはなぜですか?

IE11 の通常フローに含まれる絶対配置フレックス項目

フレックスボックス レイアウトでは、要素はその要素に基づいて行または列に配置されます。フレックスプロパティ。ただし、フレックスボックス内の要素が絶対的に配置されている場合、その要素はフロー外要素となり、レイアウトに参加すべきではありません。

提供されたコード例では:

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

「.bg」div は絶対配置されます。それにもかかわらず、IE11 では、フレックス項目間のスペースは、「.bg」 div が通常のフローの一部であるかのように分散されます。これはフレックスボックスの仕様からの逸脱です。

回避策:

この問題を解決するには、絶対に配置された ".bg" div を他の div の間で移動することが 1 つの回避策です。 2 つのフレックス項目:

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

この構造変更により、「.bg」 div は、フレックス項目間のスペースを確保すると、目的のレイアウトが実現されます。

以上が絶対配置された Flex アイテムが IE11 のレイアウトに影響を与えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。