如何在 IE11 中使 flex-end 工作 [英] How to make flex-end work in IE11

问题描述

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

在尝试了几种组合后，我创建了一个在 Chrome 中有效但在 IE11 中无效的最小片段:

.token-container {宽度:200px；空白:nowrap；溢出:隐藏；填充:5px；box-shadow: 1px 1px 2px 1px 银色插图；显示:弹性；弹性方向:行；justify-content: flex-end;//对齐内容:flex-end;}.token {显示:内联块；边框:1px纯银；边距:1px 3px 0 0；边框半径:4px；高度:19px；填充:0 3px；}

<div class="token"><span class="token-text">t-bone</span>
<div class="token"><span class="token-text">汉堡包</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">培根</span></div>

这是 CodePen 中的相同片段:http://codepen.io/anon/pen/bVgOYJ

我希望培根"项目与盒子的右端对齐；相反，t-bone"是左对齐的.

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

<小时>

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

利用 对另一个 SO 问题的回复，我能够做到这一点——无需使用 flexbox.

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

所以，谢谢@AaronSieb，我猜.

解决方案

这似乎不是 flexbox 问题.似乎更像是 Internet Explorer 如何处理 overflow: hidden 的问题.

在您的代码中，您将 flex 容器的宽度设置为 200 像素.如果您将其更改为 500 像素，您会看到 justify-content: flex-end 在 IE11(以及所有其他主要浏览器)中运行良好.

.token-container { 宽度:500px;}/* 从 200px 开始调整 */

看起来，当overflow: hidden 在 IE11 中剪辑内容时，对 flex 对齐的尊重并不多.这是另一个测试:

将 width 恢复到 200px.然后将对齐更改为 justify-content: flex-start.

IE11 中没有任何变化(flex-start 和 flex-end 看起来相同).但是，如果您将 width 扩展到 500px，您会看到实际应用了 flex-start.(同样处理 center 值.)

基于这些测试，我会说这不是 flexbox 问题.在快速搜索中，我找不到任何关于 overflow: hidden 和 IE11 的问题，但这可能是问题所在.

I tried to make justify-content: flex-end; work, for overflowing-hidden DIV content, in IE11, without success.

After trying several combinations I created a minimal snippet which works in Chrome but not in IE11:

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

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

Here's the same snippet in CodePen: http://codepen.io/anon/pen/bVgOYJ

I would expect the 'bacon' item to be aligned with the right end of the box; instead the 't-bone' is aligned left.

Please point out any errors, perhaps in my expectations for Internet Explorer.

---

UPDATE: Added my own alternative solution

Leveraging a response to another SO question, I was able to do it--without using flexbox.

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

So, thanks @AaronSieb, I guess.

解决方案

This doesn't appear to be a flexbox issue. It appears to be more an issue of how Internet Explorer handles overflow: hidden.

In your code you have the width of the flex container set to 200px. If you change this to, let's say, 500px, you'll see that justify-content: flex-end is working perfectly well in IE11 (and all other major browsers).

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

It appears that when overflow: hidden clips content in IE11, there isn't much respect for flex alignment. Here's another test:

Restore the width to 200px. Then change the alignment to justify-content: flex-start.

Nothing changes in IE11 (flex-start and flex-end look the same). But if you expand the width to 500px you'll see that flex-start is actually applied. (Same deal with center value.)

Based on these tests I would say this is not a flexbox issue. In a quick search I couldn't find anything about problems with overflow: hidden and IE11, but that may be where the problem lies.

这篇关于如何在 IE11 中使 flex-end 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！