IE 10/11 flex子溢出对齐的解决方法

Question

如果flex容器具有justify-content：center，并且只有一个flex容器比容器宽，则除了IE10和IE11之外，所有浏览器中的内容都保持居中（内容在两个方向上均等地溢出）。 / p>

在大多数浏览器中，您都可以：

在IE 10/11中你得到了这个：

我需要一种在IE浏览器中实现居中布局的方法，而不必完全放弃Flexbox方法。如果有必要，我愿意接受CSS破解IE的变通办法。

这是一个小例子：

.wrap {
  width: 100%;
  height: 100%;
}

.layer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

.layer-inner {
  font-size: 20px;
  width: auto;
  white-space: nowrap;
  line-height: 1em;
}

<div class="wrap">
  <div class="layer">
    <span class="layer-inner">
      This overlowing text should be centered
    </span>
  </div>
</div>

Answer 1

我明白了。在IE 10/11＆＃34;证明内容＆＃34;和＆＃34;对齐项目＆＃34;表现不同。如果孩子沿着对齐内容轴大于容器，那么IE 10/11将只使用＆＃34; justify-content：flex-start＆＃34;行为。如果孩子比＃34; align-items＆＃34;但是，内容将根据＆＃34; align-items＆＃34;正确对齐。值，即使孩子溢出容器。

我的解决方案只是添加＆＃34; flex-direction：column＆＃34;到下面的片段：

＆＃13;

＆＃13;

.wrap {
  width: 100%;
  height: 100%;
}

.layer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

.layer-inner {
  font-size: 20px;
  width: auto;
  white-space: nowrap;
  line-height: 1em;
}

＆＃13;

<div class="wrap">
  <div class="layer">
    <span class="layer-inner">
      This overlowing text should be centered
    </span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;