为什么 justify-content: center 在 IE 中不工作？答案

【问题标题】：Why doesn't justify-content: center work in IE?为什么 justify-content: center 在 IE 中不工作？
【发布时间】：2019-02-15 05:04:08
【问题描述】：

I have this simple div with a button inside of it。 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) 一起使用时，the button will fit into the 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>

div 和 button 中的 height 和 width 始终相同，但可以自定义。

我尽量不包装元素。

【问题讨论】：

标签： css flexbox internet-explorer-11

【解决方案1】：

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>

【讨论】：

我认为 flex-direction 为父级分配了主轴。因此，如果它设置为行，justify-content:center 应该沿水平轴居中内容。如果您明确将其设置为列，则它应沿垂直方向居中内容。 IE11 似乎连续不尊重justify-content:center。
就我而言，我使用flex-direction: column-reverse; 一切都取决于您的要求:)
拯救了我的一天。我遇到了同样的问题。

【解决方案2】：

就我而言，我必须将 flex 容器的高度设为 100%。 justify-content 之后就没有问题了。

我还必须将（第一级）儿童的最大宽度设为 100%，以修复一些水平溢出的内容。

【讨论】：