证明内容 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

尝试添加更多显示支持：

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

尝试使用

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

在你的class中像这样

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

希望这对您有所帮助...

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

结果如下：

Answer 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 在这些情况下做得很好，因为它防止了不必要的溢出，这可能会产生如这个问题中所述的问题 and also this one

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

Flex和IE是个通病。大多数时候这与 flex 元素的 parent 有关。问题中缺少 parent，但您应该这样做：

HTML

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

CSS

.flex-wrapper { width: 100%; }

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

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

justify content flex-end not working for IE

html

css

flexbox

internet-explorer-11