web-dev-qa-db-ja.com

IE10 / 11でFlexの自動マージンが機能しない

フレックスボックスを使用してさまざまな要素を垂直および水平に中央に配置する複雑なレイアウトを使用しています。

最後の要素にはmargin-right:auto;を適用して、要素を左に押します（および要素の中央揃えを無効にします）。

これはIE10/11を除くすべての場所で正しく機能し、私を夢中にさせています。

HTML/CSSサンプル：

#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

画面には、赤い親の横に左揃えする必要がある2つのアイテムが表示されます（つまり、両方を中央に配置する必要がありますが、最後のアイテムにはmargin-right:auto;が適用され、行全体を埋め、他のアイテムとそれ自体を横に押します）-これは正しい動作です。 IE10/11を除き、両方のアイテムが誤って中央に配置されています。つまり、2番目のアイテムのmargin-right:auto;は無視されます。

以前にこのようなことを経験したIE/flexboxの専門家はいますか？

cssinternet-explorerflexboxinternet-explorer-11internet-explorer-10
32
Michael

これはIEバグです。

flexbox仕様に従って：

8.1。自動マージンでの整列

justify-contentおよびalign-selfを介した整列の前に、正の空き領域はその次元の自動マージンに分配されます。

注：空きスペースが自動マージンに配分されている場合、余白は屈曲後に残ったすべての空きスペースをスチールするため、位置合わせプロパティはその寸法には影響しません。

つまり、自動マージンはjustify-contentよりも優先されます。

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

コードはChromeおよびFirefoxで正常に機能します。これらのブラウザは仕様に準拠しているためです。

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

（IE10は 以前のバージョンの仕様 で構築されていることに注意してください）

ソリューション

方法＃1：自動マージンのみを使用する

justify-contentが削除された場合、自動マージンはIE10/11で正常に機能します。したがって、justify-contentを使用しないでください。自動マージンを最後まで使用します。 （ 自動マージンを使用した配置の例を参照 ）。

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

visibility: hiddenとflex-grow:1で3番目の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: pink;
}
#container > div {
  background: cornflowerblue;
  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>
58
Michael_B