证明内容弹性端不适用于IE

Question

Flex-end适用于chrome和firefox，但不适用，即通过以下代码进行操作

.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以及问题{{3 }}

考虑到这一点，很难说这是否是一个错误。这可能是设计使然，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>

对之前的示例也采用了相同的技巧：

.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单位。