Question

我试图让justify-content: flex-end;工作，因为在IE11中存在溢出隐藏的DIV内容，但没有成功。

在尝试了几种组合之后，我创建了一个最小的片段，它可以在Chrome中使用，但不能在IE11中使用：

＆＃13;

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  //align-content: flex-end;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

＆＃13;

<div class="token-container">
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">bacon</span></div>
</div>

＆＃13;

这里是CodePen中的相同代码段：http://codepen.io/anon/pen/bVgOYJ

我希望＆＃39;培根＆＃39;项目与框的右端对齐;相反，“骨头”＃39;向左对齐。

请指出任何错误，也许是我对Internet Explorer的期望。

更新：添加了我自己的替代解决方案

利用response to another SO question，我能够做到 - 不使用flexbox。

http://codepen.io/anon/pen/ZbeQmW

所以，谢谢@AaronSieb，我猜。

Answer 1

这似乎不是Flexbox问题。这似乎是Internet Explorer如何处理overflow: hidden的问题。

在您的代码中，您将Flex容器的宽度设置为200px。如果您将其更改为500px，您会看到justify-content: flex-end在IE11（以及所有其他主流浏览器）中运行良好。

.token-container {  width: 500px; } /* make this adjustment from 200px */

当overflow: hidden剪辑IE11中的内容时，似乎没有太多关于弹性对齐的方面。这是另一个测试：

将width恢复为200px。然后将对齐方式更改为justify-content: flex-start。

IE11中没有任何变化（flex-start和flex-end看起来相同）。但是，如果将width扩展为500px，您会看到实际应用了flex-start。（与center值相同。）

根据这些测试，我会说这不是一个flexbox问题。在快速搜索中，我找不到有关overflow: hidden和IE11问题的任何信息，但这可能是问题所在。

Answer 2

这可以通过flexbox来实现-如果您愿意稍微修改一下标记。我发现，尽管IE11在带有flex-end的flex父级中不尊重overflow: hidden，但它将尊重flex-start（默认理由）。这意味着，如果将父级的伸缩方向设置为row-reverse，则可以获得所需的行为（将子级与父级的右边缘对齐，并使它们向左溢出）。

很明显，这仅在以下情况下有效：a）您有一个flex子级或b）您愿意在标记中颠倒flex子级的顺序。

将其应用于您的原始代码，我们得到：

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row-reverse;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

<div class="token-container">
  <div class="token"><span class="token-text">bacon</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
</div>

Answer 3

正如其他人所说，忘记用于IE 11的版本的flex CSS。我轻轻地改变了你的第一个建议代码，包括CSS和HTML，突出显示已更改/添加的行：

.token-container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px;
    box-shadow: 1px 1px 2px 1px silver inset;

    display: flex;
    flex-direction: row;
}
/* you have to nest your tokens inside another div with large fixed margin-left, flex-shrink: 0 (important), and no border nor padding */
.intermediate {
    flex: 1 0 auto;
    padding: 0;
    border: 0;
    margin: 0 0 0 -1000px;
    /* added: constant amount - the more, the better
       the perfect value is the workarea width, but, if available,
       you can use the maximum-width of a token element */
}
.token {
    display: inline-block;
    border: 1px solid silver;
    margin: 1px 3px 0 0;
    border-radius: 4px;
    height: 19px;
    padding: 0 3px;

    float: right; /* added: you need to reverse your tokens! (litte effort) */
}

<div class="token-container">
    <div class="intermediate">
        <!-- reversed children nodes -->
        <div class="token"><span class="token-text">bacon</span></div>
        <div class="token"><span class="token-text">leberkäs</span></div>
        <div class="token"><span class="token-text">pancetta</span></div>
        <div class="token"><span class="token-text">hamburger</span></div>
        <div class="token">
            <span class="token-text">t-bone</span>
        </div>
    </div>
</div>

如何在IE11中进行flex-end工作

3 个答案: