证明内容 flex-end 不适用于 IE答案

【问题标题】：justify content flex-end not working for IE证明内容 flex-end 不适用于 IE
【发布时间】：2019-07-30 05:16:18
【问题描述】：

Flex-end 适用于 chrome 和 firefox，但不适用于 ie，请查看以下代码

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

【问题讨论】：

哪个IE？
@TemaniAfif 即 11
@SarabjitSingh 试试这个stackoverflow.com/questions/32885534/… 希望这对你有用。
@NitinGarg 检查条件在我的例子中是高度 100px，在 chrome 和 IE11 中检查此代码，然后你就会明白差异
请仅在建议编辑时为问题添加相关标签。此外，您应该尽可能地改进问题，而不是只是添加标签。评论旨在描述您执行的什么操作以及为什么；它们不应该是单个复制粘贴的文本行，这对于确定您进行编辑的为什么很有帮助（而且，它拼写错误）。

标签： html css flexbox internet-explorer-11

【解决方案1】：

尝试添加更多显示支持：

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

.flex-container {  
  /* Add more browser support */
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;

  /* Combined flex-wrap and flex-direction */
  flex-flow: nowrap column;

  /* Add more browser support */
  justify-content: flex-end;
  -webkit-justify-content: flex-end;

  /* This could potentially help with IE10+11 */
  -ms-flex-pack: end;
  justify-content: space-between;  


  height:100px

  background-color: DodgerBlue; 
  height:100px
}

http://the-echoplex.net/flexyboxes/ 给了不少小贴士。

【讨论】：

如果高度小于内容，则在 IE11 中存在问题

【解决方案2】：

尝试使用

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

像这样在你的班级里

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

希望这对你有帮助...

【讨论】：

【解决方案3】：

你可以参考下面的代码，看来我这边flex-end效果不错：

<style>
    .flex-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        background-color: DodgerBlue;
        height: 100%;
        flex-direction: column;
        flex-flow: column;
    }
        .flex-container > div:nth-child(2n+0) {
            background-color: aquamarine;
            width: 300px;
            height: 30px
        }
        .flex-container > div:nth-child(2n+1) {
            background-color:antiquewhite;
            width: 300px;
            height: 30px
        }
</style>
<h1>Flexible Boxes</h1>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

结果如下：

【讨论】：

使其容器高度为 100px，然后在 IE11 中检查
类似this的结果。你的意思是如果 height 属性足够小，它会覆盖容器吗？您是否可以尝试删除 flex-direction 和 flex-flow 属性。然后像this这样的结果。
我上面的代码适用于我想要的 chrome 和 firefox，在 chrome 和 IE11 中检查它，这样你就明白问题了

【解决方案4】：

IE 似乎使用 justify-content当有溢出时以不同方式对齐项目。这不仅发生在flex-end 上，使用center 也会遇到同样的情况。任何会造成顶部溢出的值都不会按预期工作。

它也将在行方向上发生。任何会造成左溢出的属性都不起作用。

对齐无效的示例：

.container {
  display:inline-flex;
  height:50px;
  width:50px;
  margin:50px;
  border:2px solid green;
}
.container span {
  flex-shrink:0;
  width:200%;
  background:red;
}

.alt {
  flex-direction:column;
}

.alt span {
  height:200%;
  width:auto;
}

<div class="container" style="justify-content:flex-end;">
  <span></span>
</div> 

<div class="container" style="justify-content:center;">
  <span></span>
</div>

<div class="container alt" style="justify-content:flex-end;">
  <span></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span></span>
</div>

我很惊讶这么说，但在这些情况下，IE 似乎做得很好，因为它可以防止不必要的溢出，这可能会产生像这个问题 Centered flex-container grows beyond top 和这个问题 Can't scroll to top of flex item that is overflowing container 中描述的问题

p>

考虑到这一点，很难说这是否是一个错误。这可能是设计使然，IE 团队决定避免 bad 溢出。 ¹

这就是说，这是一个 hack 使用一些负边距，可以让您在 IE 上拥有所需的行为：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
  flex-direction: column;
  flex-flow: column;
  justify-content: flex-end;
  height: 100px
}
.flex-container > div:first-child {
  margin-top:-100vh; /*put a very big margin here*/
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

同样的 hack 应用于前面的例子：

.container {
  display:inline-flex;
  height:50px;
  width:50px;
  margin:50px;
  border:2px solid green;
}
.container span {
  flex-shrink:0;
  width:200%;
  background:red;
}

.alt {
  flex-direction:column;
}

.alt span {
  height:200%;
  width:auto;
}

<div class="container" style="justify-content:flex-end;">
  <span style="margin-left:-100%;"></span>
</div> 

<div class="container" style="justify-content:center;">
  <span style="margin: 0 -100%;"></span>
</div>

<div class="container alt" style="justify-content:flex-end;">
  <span style="margin-top:-100%;"></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span style="margin:-100% 0;"></span>
</div>

^{1：我暂时没有任何官方证明。}

【讨论】：

不，伙计，margin 不是解决方案，如果是 flex-flow: row than what
@SarabjitSingh 正如我所描述的，IE 的行为就是这样，所以你需要一些 hack 来实现你想要的......如果是行方向，我们可以做另一个 hack，分享你的代码
太好了，它几乎在每个列条件下都有效..谢谢！

【解决方案5】：

Flex 和 IE 是一个常见的问题。大多数情况下，这与 flex 元素的父元素有关。问题中缺少父母，但您应该这样做：

HTML

<div class"flex-wrapper">
    <div class="flex-container">...</div>
</div>

CSS

.flex-wrapper { width: 100%; }

重要的是您使用% 而不要使用px 单位。

【讨论】：