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

Question

如果 flex 容器有 justify-content: center，并且有一个比容器宽的 flex 子容器，则内容在除 IE10 和 IE11 之外的所有浏览器中保持居中（内容在两个方向上均等地溢出） .

在大多数浏览器中你会得到这个：

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

我需要一种方法来在那些 IE 浏览器中实现居中布局，而无需完全放弃 flexbox 方法。如有必要，我愿意 CSS 破解 IE 变通办法。

这里有一个fiddle例子：

.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 中 "justify-content" 和 "align-items" 表现不同。如果 child 大于沿 justify-content 轴的容器，则 IE 10/11 将只使用 "justify-content: flex-start" 行为。如果 child 沿 "align-items" 轴大于容器，内容将根据 "align-items" 值正确对齐，即使 child 溢出容器。

我的解决方案是将 "flex-direction: column" 添加到下面的代码段中：

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

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

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

Workaround for IE 10/11 flex child overflow alignment

css

flexbox

internet-explorer-10

internet-explorer-11