证明内容弹性端不适用于IE [英] justify content flex-end not working for IE

问题描述

Flex端适用于chrome和firefox，但不适用于IE，请通过以下代码

  .flex-container {display：flex; flex-wrap：nowrap;背景颜色：DodgerBlue; flex-direction：column; flex-flow：column; justify-content：flex-end; height：100px}  

  < h1>弹性盒< / 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>尝试调整浏览器窗口的大小。< p&p; p>带有 flex-wrap：nowrap;的容器< / p>< p>< strong>注意：< / strong> Internet Explorer 10或更早版本不支持Flexbox。< / p>  

解决方案

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

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

该示例不执行任何操作的示例：

  .container {display：inline-flex;高度：50px;宽度：50px;边距：50px; border：2px纯绿色；}。容器跨度{flex-shrink：0;宽度：200％; background：red;}。alt {flex-direction：column;}。alt span {高度：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似乎做得很好，因为它可以防止不必要的溢出，这可能导致出现此问题中所述的问题居中的flex-container超出了顶部，而且这一个无法滚动到flex项的顶部

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

---

这就是说，这是 hack 使用的负边距，将使您在IE上具有所需的行为：

  .flex-container {display：flex; flex-wrap：nowrap;背景颜色：DodgerBlue; flex-direction：列; flex-flow：列;证明内容：flex-end;高度：100px}。flex-container> div：first-child {margin-top：-100vh; / *在此处提供很大的利润* /}  

 < ; h1>柔性盒< / 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>  

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

 。容器{display：inline-flex;高度：50px;宽度：50px;边距：50px; border：2px纯绿色；}。容器跨度{flex-shrink：0;宽度：200％; background：red;}。alt {flex-direction：column;}。alt span {高度：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>  

p>

^{1：我暂时没有任何正式证据。}

Flex-end working for chrome and firefox, but not working for ie, go through following code

.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 seems to align items differently using justify-content when there is an overflow. it doesn't only happen with flex-end, you will face the same using center. Any value that will create a top overflow will not work as expected.

It will also happen in a row direction. Any property that will create a left overflow will not work.

Examples where the alignment is doing nothing:

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

I am surprised to say this, but it seems that IE is doing a good thing in those cases because it's preventing the unwanted overflow which may create issues like described in this question Centered flex-container grows beyond top and also this one Can't scroll to top of flex item that is overflowing container

Considering this, it's difficult to say if it's a bug. It's a probably by design and the IE team made the decision to avoid the bad overflow. ¹

---

This said, here is a hack using some negative margin that will allow you to have the needed behavior on 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>

Same hack applied to the previous examples:

.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: I don't have any official proof at the time being.}

这篇关于证明内容弹性端不适用于IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！