我在一个大图像旁边有一个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中的行包装到 使它们成为非柔性容器
有没有人知道可能会发生什么？我非常讨厌IE。
答案 0 :(得分：1)
首先你有IE，它尽其所能阻止编码变得有趣或轻松......
然后你在IE10和IE11中有很多flexbox-related bugs ......
添加与flex-direction: column ...
然后最终将图像投射到弹性项目中（一组完全不同的挑战和不一致）......
你几乎可以保证找到麻烦。
我的建议是将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 */
}