IE10/11でフレックス自動マージンが機能しない

Question

私はフレックスボックスでさまざまな要素を垂直方向と水平方向にセンタリングする複雑なレイアウトです。

最後の要素にはmargin-right:auto;が適用され、要素を左に押して（それらをセンタリングすることを否定します）。

これはIE10/11を除くすべての場所で正常に動作し、私を夢中にしています。

HTML/CSSサンプル：あなたが赤の側に左揃えする必要があり、画面上に2つの項目が表示されます

#container { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -ms-flex-flow: row wrap; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    
 
    -ms-flex-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    
 
    -ms-flex-line-pack: center; 
 
    -webkit-align-content: center; 
 
    align-content: center; 
 
} 
 

 
#second-item { 
 
    margin-right: auto; 
 
} 
 

 
/* just some colors - not important */ 
 
#container { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
#container > div { 
 
    background: blue; 
 
    padding: 10px; 
 
    outline: 1px solid yellow; 
 
}

<div id='container'> 
 
    <div id='first-item'>first item</div> 
 
    <div id='second-item'>second item</div> 
 
</div>

http://codepen.io/anon/pen/NrWVbR

親（つまり、両方とも中央揃えにする必要がありますが、最後の項目にはmargin-right:auto;が適用され、行全体が塗りつぶされ、他の項目とi側にいる） - これは正しい動作です。両方の項目が正しく配置されていないIE10/11では、2番目の項目のmargin-right:auto;は無視されます。

これまでにIE/flexboxの専門家が出会ったことはありますか？

Answer 1

これはIEバグのようです。フレキシボックス仕様によれば

：justify-contentとalign-self介し配向へ

8.1. Aligning with auto margins

前に、任意の正の空き領域は、その寸法に自動マージンに分配されます。

注：空き領域が自動余白に分散されている場合、余白によって余分な空き領域が盗まれてしまいますので、配置プロパティはその寸法に影響しません。

つまり、自動余白がjustify-contentよりも優先されます。

実際に、要素に自動余白が適用されている場合、justify-contentやalign-selfなどのキーワード配置プロパティは効果がありません（自動余白はすべての領域を占有しているため）。

これらのブラウザは仕様に準拠しているため、あなたのコードはChromeとFirefoxで正常に動作します。

IE10とIE11は準拠していないようです。彼らは仕様で定義されているように自動マージンを適用していません。

（IE10はprevious version of the specに基づいています。）

---

ソリューション

方法＃1：justify-contentが削除されている場合は使用自動マージンは

、自動マージンがIE10/11で正常に動作。 justify-contentを使用しないでください。すべての方法で自動余白を使用してください。 （See examples of alignment with auto margins）。

方法＃2：目に見えないスペーサーのdivを使用し

visibility: hiddenとflex-grow:1と第三のdivを作成します。これにより、自動的に#first-itemと#second-itemが左端にシフトします。自動余白は必要ありません。

#container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
} 
 
#third-item { 
 
    flex-grow: 1; 
 
    visibility: hidden; 
 
} 
 
/* just some colors - not important */ 
 
#container { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
#container > div { 
 
    background: blue; 
 
    padding: 10px; 
 
    outline: 1px solid yellow; 
 
}

<div id='container'> 
 
    <div id='first-item'>first item</div> 
 
    <div id='second-item'>second item</div> 
 
    <div id='third-item'>third item</div> 
 
</div>