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容器从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