コンテンツを持つ2つのdivと、絶対位置を持つ背景である3番目のdivがあります。
コンテナはフレックスボックスです。
ChromeおよびSafariではすべて正常に動作しますが、 Firefoxおよび IE11は絶対位置のdivを考慮し、3つのdivが連続するようにdiv間にスペースを分配します。
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>
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 で確認できます
UPDATE:この問題はFirefoxで解決されました(v52、2017年3月リリース)。問題はまだIE11に存在します。
あなたが質問で書いたように:
Firefoxは絶対位置のdivを計算し、3つのdivが連続するようにdiv間にスペースを分配します。
Firefoxは3番目のdiv(.bg
)、絶対配置、in-flowflexアイテム、およびspace-between
計算。 (IE11もこれを行います; ChromeそしてEdgeはそれを無視します。)
明らかに、これは現在のflexbox仕様に準拠していません:
アウトオブフローであるため、フレックスコンテナの絶対位置の子はフレックスレイアウトに参加しません。
回避策は次のとおりです。
絶対位置にある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>
たとえば、::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
フローからもその要素が削除されると思います。仕様でこれが明確になっているかどうかはわかりません。
別の方法として、コンテンツセレクター内で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/