Flexbox網格在IE10/11中未對齊

Question

我有一個2x2網格，需要排列一個大圖像。 （here's a codepen）我使用了Bootstrap 3.3.7和Flexbox的組合，它在所有內容中看起來都很棒，但是IE（看圖）。我只是在試圖解決這個問題的牆上打我的頭。

我已經得到了2x2網格的所有東西，像這樣排成一行。

 <div class="row || flex-row"> 
      <div class="col-xs-12 || col-md-6 || core-values-left"> 
       <div> 
        <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corevaluesmain-1.jpg"> 
       </div> 
      </div> 

      <div class="col-xs-12 || col-md-6 || core-values-right"> 
       <div class="row"> 
        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopleft.jpg"> 

          <h4 class="core-values-heading">We Scout</h4> 

          <div class="core-hover"> 
           <h5>We are a talent scout and agent for the grocery industry</h5> 
           <div> 
            <a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn more</a> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopright-1.jpg"> 

          <h4 class="core-values-heading">We Discover</h4> 

          <div class="core-hover"> 
           <h5>We seek out new CPG opportunities and innovations</h5> 
           <a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn More</a> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomleft.jpg"> 

          <h4 class="core-values-heading">We Grow</h4> 

          <div class="core-hover"> 
           <h5>We expand your brand’s horizons and elevate your success</h5> 
           <a href="http://www.google.com" class="btn || btn-secondary || hover-btn || hover-btn">Learn more</a> 
          </div> 
         </div> 
        </div> 

        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomright.jpg"> 

          <h4 class="core-values-heading">We Champion</h4> 

          <div class="core-hover"> 
           <h5>We value our client relationships and always go the extra mile</h5> 
           <a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn more</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

然後，我將這個CSS應用到行和列，並用flex對齊它。工程就像一個魅力.... IE除外

.flex-row { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
     flex-wrap: wrap; } 
    .flex-row > [class*='col-'] { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; } 

事情我已經嘗試：

• 添加最小高度爲列

• 結束語行的另一個div來 使它們成爲非柔性容器

• 在 行和列
上明確設置flex：1 1 0％
• 摩擦神燈和召喚精靈來 解決我的問題

有沒有人有什麼線索可能發生的???我非常討厭IE。

Answer 1

首先，你必須IE瀏覽器，它做一切所能，阻止樂趣或易編碼...

然後，你必須在IE10和IE11的許多flexbox-related bugs ...

再加上有關flex-direction: column多個錯誤...

後來終於扔圖像到Flex項目（一套完全不同的挑戰和矛盾）......

而且你幾乎肯定可以找到卓uble。

我的建議是將flex容器從column切換到row。這應該使您的佈局更容易通過IE瀏覽器處理。

嘗試這些調整：

.flex-row > [class*='col-'] { 
    display: flex; 
    /* flex-direction: column; */ 
    flex-direction: row; /* new */ 
    flex-wrap: wrap; /* new */ 
    align-content: space-between; /* new */ 
} 
.core-values-left > div { 
    flex: 1; /* new */ 
} 

revised codepen