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

• 明确设置 flex: 1 1 0%行和列
• 擦一盏神灯，召唤一个 Sprite 解决我的问题

有没有人知道可能会发生什么？？？我非常讨厌IE。

Answer 1

首先你有 IE，它尽其所能地阻止编码变得有趣或简单......

然后你有很多flexbox-related bugs在 IE10 和 IE11 中...

除此之外还有与 flex-direction: column 相关的多个错误...

然后最终将图像放入 flex 元素中(一组完全不同的挑战和不一致)...

而且您几乎肯定会遇到麻烦。

我的建议是将 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