证明内容弹性端不适用于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

justify-content 当出现溢出时， IE似乎使用不同的方式对齐项目。它不仅会发生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是做了一件好事在这种情况下，因为它阻止想在这个问题描述可能产生问题的不必要的溢出中心的柔性容器增长超过顶部，也这个不能滚动到容器溢出的弹性项目的顶部

考虑到这一点，很难说这是否是一个错误。这可能是设计使然，IE团队已做出决定以避免严重的溢出。^1个

这就是说，这是使用一些负余量的黑客，它将使您在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：我暂时没有任何官方证据。}