Question

I have this simple div with a button inside of it。 justify-content: center;使用Firefox和Chrome工作正常，但在IE 11上不起作用：

＆＃13;

#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;
}

＆＃13;

<div id="div">
  <button id="button">HELLO</button>
</div>

＆＃13;

我的目标是，当transform与rotate(90deg)或rotate(270deg)，the button will fit into the div一起使用{/ 1}时：

＆＃13;

#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);
}

＆＃13;

<div id="div">
  <button id="button">HELLO</button>
</div>

＆＃13;

height和width的{{1}}和div始终相同，但可以自定义。

尽可能地，我不喜欢包裹元素。

Answer 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>

Answer 2

就我而言，我必须将flex容器的高度设为100％。证明内容在此之后没有任何问题。

我还必须使（第一级）孩子的最大宽度为100％，以解决某些水平溢出的内容。

为什么不能证明内容：在IE中心工作？

2 个答案: