web-dev-qa-db-ja.com

コンテンツを正当化しないのはなぜですか：IEでセンターワークを行うのはなぜですか？

ボタンが内部にあるこの単純なdivがあります 。 _justify-content: center;_はFirefoxおよびChromeを使用して正常に動作しますが、IE 11：では動作しません：

_#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
}_
_<div id="div">
  <button id="button">HELLO</button>
</div>_

私の目標は、transformをrotate(90deg)またはrotate(270deg)とともに使用すると、 ボタンがdivに収まる ：

_#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}_
_<div id="div">
  <button id="button">HELLO</button>
</div>_

heightとwidthのdivとbuttonは常に同じですが、カスタマイズ可能です。

可能な限り、要素をラップしないことを好みます。

csscss3flexboxinternet-explorer-11
22
KaeL

IE11では、親にflex-direction: columnが必要です。

この例では、ボタンが回転しています。

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}
<div id="div">
  <button id="button">HELLO</button>
</div>
46
misterManSam

私の場合、フレックスコンテナの高さを100％にする必要がありました。その後、justify-contentは問題なく機能しました。

また、一部のコンテンツが水平方向にオーバーフローするのを修正するために、（最初のレベルの）子供の最大幅を100％にする必要がありました。

3
Rafalfaro