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