web-dev-qa-db-ja.com

IE11の通常のフローから絶対位置にあるフレックスアイテムが削除されない

コンテンツを持つ2つのdivと、絶対位置を持つ背景である3番目のdivがあります。

コンテナはフレックスボックスです。

ChromeおよびSafariではすべて正常に動作しますが、 Firefoxおよび IE11は絶対位置のdivを考慮し、3つのdivが連続するようにdiv間にスペースを分配します。

enter image description here

Jsfiddleの例を作成しました。このバグを修正する方法はありますか？ https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>
htmlcsscss3flexboxinternet-explorer-11
28
Nikolay Aleshkovskiy

justify-content: space-between;アイテムを均等に配布します最初のアイテムは最初に、最後のアイテムは最後に。パット<div class="bg">Background</div> の間に <div class="c1">Content 1</div>および<div class="c2">Content 2</div> このような

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

</div>

理由は https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content で確認できます

14
Guru

UPDATE：この問題はFirefoxで解決されました（v52、2017年3月リリース）。問題はまだIE11に存在します。

あなたが質問で書いたように：

Firefoxは絶対位置のdivを計算し、3つのdivが連続するようにdiv間にスペースを分配します。

Firefoxは3番目のdiv（.bg）、絶対配置、in-flowflexアイテム、およびspace-between計算。 （IE11もこれを行います; ChromeそしてEdgeはそれを無視します。）

明らかに、これは現在のflexbox仕様に準拠していません：

4.1。絶対位置指定Flexの子（

アウトオブフローであるため、フレックスコンテナの絶対位置の子はフレックスレイアウトに参加しません。

回避策は次のとおりです。

絶対位置にあるdivを他の2つの間で動かさないのはなぜですか？

これの代わりに：

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

これを試して：

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

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="bg">Background</div>
  <div class="c2">Content 2</div>
</div>

OR ... remove .bgフレックスコンテナから：

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

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
</div>
<div class="bg">Background</div>

OR ... flex orderプロパティを使用して、flexアイテムを再配置します。

これをコードに追加します。

.c2 { order: 1; }

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
  order: 1;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>
32
Michael_B

たとえば、::beforeと::afterを使用している場合など、ものを並べ替えることができない場合があります。これらの場合、手動で要素をorderできます。

あなたの場合、あなたはする必要があります：

.c1 {
  order: -1;
}
.c2 {
  order: 10;
}

orderプロパティはflex仕様の一部であり、フレックスアイテムの順序を変更できます（ reference on MDN ）。これには複数の目的があり、非常に便利です。

値は序数であるため-1を使用しました。したがって、負の数に設定すると、他のすべてのデフォルトよりも優先され、::beforeの値を指定する必要がなくなります。同じ理由で、10を使用すると、コンテナに要素の束を追加しても、2番目のdivが最後に来ることが保証されます。これを100などに増やすことができます。

それでも、Firefoxの動作は直感に反するようです。 position: absoluteは通常、通常のdomフローの要素を削除します。SafariやChromeの場合と同様に、flexフローからもその要素が削除されると思います。仕様でこれが明確になっているかどうかはわかりません。

5
Emanuele Feliziani

別の方法として、コンテンツセレクター内でflexプロパティを使用できます。

    div.c1 {
      background: #aaeecc;
      width: 100px;
      position: relative;
      z-index: 50; top: 20px;
      display: flex;

      flex: 1; /* add this */
    }

これにより、フレックスグローが設定されます。必ずしも必要なものではないかもしれませんが、コンテンツdivを並べ替えたり、フレックスラッパーから取り出したりできない他の人に役立つ可能性があります。

デモは次のとおりです。 https://jsfiddle.net/s18do03e/14/

1
Constantin Stan