ホームページ > ウェブフロントエンド > CSSチュートリアル > 絶対配置された Flex アイテムが IE11 のレイアウトに影響を与えるのはなぜですか?

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

Patricia Arquette
リリース: 2024-12-16 22:00:21
オリジナル
775 人が閲覧しました

Why Does an Absolutely Positioned Flex Item Affect Layout in IE11?

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

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

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

1

2

3

4

5

<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 つのフレックス項目:

1

2

3

4

5

<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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート