IE10/11 中的 Flexbox 网格未对齐

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