PROSAGA码农传奇-html/HTML5-证明内容flex-end不适用于IE

0# ࿏自ོ༾由ོ༽人͙⃡⌇ | 2019-08-31 10-32

1# 日耀九洲 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    尝试添加更多显示支持：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .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
}
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    <a href="http://the-echoplex.net/flexyboxes/" rel="nofollow noreferrer">
      http://the-echoplex.net/flexyboxes/
    </A>
     给出了不少提示。
  </p>
</DIV>

2# 撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    您可以参考以下代码，似乎flex-end在我身边运行良好：
  </p>
   <pre>
    <code>
      <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>

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

</code>
  </pre>
  <P>
    结果如下：
  </p>
  <P>
    <a href="https://i.stack.imgur.com/3sal9.png" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/3sal9.png”alt =“在此处输入图片说明”/>
    </A>
  </p>
</DIV>

3# 圈圈红 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    IE似乎使用不同的方式对齐项目
     <code>
      justify-content
    </code>
    的<strong>
      当有溢出
    </强>
    。它不仅发生在
     <code>
      flex-end
    </code>
    ，你将面临同样的使用
     <code>
      center
    </code>
    。任何会产生顶部溢出的值都无法按预期工作。
  </p>
  <P>
    它也会在行方向上发生。任何会产生左溢出的属性都不起作用。
  </p>
  <P>
    对齐无效的示例：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div class="container" style="justify-content:flex-end;">
  <span></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span></span>
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    我很惊讶地说这个，但似乎IE在这些情况下做得很好，因为它可以防止不必要的溢出，这可能会产生像这个问题中描述的问题
    <a href="https://stackoverflow.com/q/49278725/8620333">
      中心的flex-container超越了顶级
    </A>
     还有这一个
    <a href="https://stackoverflow.com/q/33454533/8620333">
      无法滚动到溢出容器的弹性项目的顶部
    </A>
  </p>
  <P>
    考虑到这一点，很难说它是否是一个错误。这可能是设计上的，IE团队决定避免使用
    <EM>
      坏
    </EM>
     溢出。
    <SUP>
      1
    </SUP>
  </p>
  <HR />
  <P>
    这说，这是一个
    <EM>
      劈
    </EM>
     使用一些负边距，允许您在IE上拥有所需的行为：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .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*/
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    同样的hack适用于前面的例子：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div class="container" style="justify-content:flex-end;">
  <span style="margin-left:-100%;"></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span style="margin:-100% 0;"></span>
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    <SUP>
      1：我暂时没有任何官方证明。
    </SUP>
  </p>
</DIV>

4# 不想吃东西 | 2019-08-31 10-32