Flexbox自动边距不适用于IE中的justify-content:center

时间:2016-01-18 18:58:07

标签: html css css3 flexbox internet-explorer-11

我有一个表格,其中一个单元格可以包含许多图标以及文本。如果存在图标,则它们显示在文本的左侧。有几种可能的对齐情况:

  1. 仅显示图标:图标应居中
  2. 仅存在文字:文字应左对齐
  3. 图标和文字都存在:图标和文字都应左对齐
  4. 我认为通过使用justify-content: center;将{_1}}中的所有内容包装到表格单元格中,然后将margin-right: auto;应用于文本div,我可以完成此操作和其他更复杂的对齐。

    如果有文字,自动边距会将所有内容推到左侧。

    如果没有,justify-content样式将使图标居中。

    Here is a codepen包含我的方法。

    .flexbox {
      display: flex;
      flex-direction: row;
      justify-content: center;
      border: 2px solid black;
      width: 300px;
      height: 17px;
    }
    .icon {
      height: 17px;
      width: 17px;
      background-color: red;
    }
    .text {
      margin-right: auto;
    }
    <div class="flexbox">
      <div class="icon"></div>
      <div class="text">asdf</div>
    </div>

    此方法适用于Chrome,但在IE 11中未正确应用正确的自动边距。我想知道为什么,以及如何绕过它。

    额外信息

    似乎IE 11首先计算自动边距,然后对齐柔性项目而不考虑这些边距,最后尽可能地应用边距。

    我相信这是因为,当在flexbox上设置justify-content: flex-end;并且文本div具有margin-left: auto;时,图标在flexbox中右对齐,而文本被推到flexbox的边界之外几乎整个flexbox的宽度(关于汽车保证金应该是什么)。

1 个答案:

答案 0 :(得分:0)

这种去除对齐内容的工作对我来说不起作用。如果您在IE11中查看此示例,您将看到:Codepen example

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: white;
}

.item {
    margin: auto;
    width: 50px;
    height: 50px;
    background-color: red;
}