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

Question

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>

Answer 1

当出现溢出时，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中描述的问题。

考虑到这一点，很难说它是否是一个错误。这可能是设计上的，IE团队决定避免不良溢出。 1

---

这就是说，这是一个使用一些负边距的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：我暂时没有任何官方证明。

Answer 2

尝试添加更多显示支持：

.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/给出了不少提示。

Answer 3

只是尝试使用

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

在你的班上这样

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

希望对你有帮助...

Answer 4

您可以参考以下代码，似乎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>

结果如下：

Answer 5

Flex和IE是一个常见问题。大多数情况下，这与flex元素的父元素有关。问题中缺少父级，但您应该执行以下操作：

HTML

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

CSS

.flex-wrapper { width: 100%; }

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