Flexbox 问题 - Firefox 和 IE10/11

Question

我在一个小的平铺样式布局中遇到的 flex-markup 没有遇到问题（使用引导程序并添加了 flex-row-classes）。

在 chrome、safari、opera，甚至在移动设备上，它都能正常工作。 IE10/11 和当前的 Firefox (44.0.2) 除外。

我得到了 4 列布局的错误，在达到断点后它们不会崩溃，而是图像保持大于应有的大小（超出最大宽度），我不知道为什么。

如果有人可以帮助我，那就太棒了！

提前谢谢你！

代码：

$(".readmore").click(function() {
      $(this).next(".expand").addClass("expanded");
    });
    $(".closebox").click(function() {
      $(this).parent(".expanded").removeClass("expanded");
    });

/* CSS used here will be applied after bootstrap.css */
    .col-xs-1,
    .col-sm-1,
    .col-md-1,
    .col-lg-1,
    .col-xs-2,
    .col-sm-2,
    .col-md-2,
    .col-lg-2,
    .col-xs-3,
    .col-sm-3,
    .col-md-3,
    .col-lg-3,
    .col-xs-4,
    .col-sm-4,
    .col-md-4,
    .col-lg-4,
    .col-xs-5,
    .col-sm-5,
    .col-md-5,
    .col-lg-5,
    .col-xs-6,
    .col-sm-6,
    .col-md-6,
    .col-lg-6,
    .col-xs-7,
    .col-sm-7,
    .col-md-7,
    .col-lg-7,
    .col-xs-8,
    .col-sm-8,
    .col-md-8,
    .col-lg-8,
    .col-xs-9,
    .col-sm-9,
    .col-md-9,
    .col-lg-9,
    .col-xs-10,
    .col-sm-10,
    .col-md-10,
    .col-lg-10,
    .col-xs-11,
    .col-sm-11,
    .col-md-11,
    .col-lg-11,
    .col-xs-12,
    .col-sm-12,
    .col-md-12,
    .col-lg-12 {
      margin: 0;
      padding: 0;
    }
    .row-flex,
    .row-flex > div[class*='col-'] {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex: 1 1 auto;
    }
    .row-flex-wrap {
      -webkit-flex-flow: row wrap;
      align-content: flex-start;
      flex: 0;
    }
    .row-flex > div[class*='col-'],
    .container-flex > div[class*='col-'] {
      /*margin:-.2px; /* hack adjust for wrapping */
    }
    .container-flex > div[class*='col-'] div,
    .row-flex > div[class*='col-'] div {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .flex-col {
      display: flex !important;
      display: -webkit-flex !important;
      flex: 1 100%;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
    }
    .flex-grow {
      display: flex;
      -webkit-flex: 2;
      flex: 2;
    }
    .contentbox {
      min-height: 292px !important;
    }
    @media (min-width: 480px) {
      .contentbox {
        min-height: 200px !important;
      }
    }
    @media (min-width: 768px) {
      .contentbox {
        min-height: 160px !important;
      }
    }
    .contentbox {
      padding: 15px 30px 15px 30px;
      text-align: center;
      display: block;
      height: auto;
      min-height: 160px;
      background-color: #eee;
    }
    .readmore {
      cursor: pointer;
    }
    .contentbox h2 {
      font-variant: small-caps;
    }
    .expand {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: 15px;
      opacity: 0;
      visibility: hidden;
      transition: all .75s ease-in-out;
      border-bottom: 2px solid $primary;
    }
    .expanded {
      top: 0;
      opacity: 1;
      visibility: visible;
      cursor: default;
      transition: all .75s ease-in-out;
      border-bottom: 2px solid #fff;
    }
    .closebox {
      font-size: 24px;
      position: absolute;
      right: 10px;
      top: 0px;
      cursor: pointer;
    }
    .shadow {
      box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.45) !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container shadow">
  <div class="row row-flex row-flex-wrap">
    <div class="col-lg-3 col-sm-6 col-xs-12 fw">
      <div class="contentbox readmore bgr flex-col">
        <h2>example</h2>
      </div>
      <div class="contentbox expand bgr flex-col">
        <span aria-hidden="true" class="pull-right closebox">×</span>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanct</p>
        <p><a href="#" class="btn btn-default">read more</a>
        </p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6 hidden-xs">
      <div class="imagecontainer">
        <img src="http://placehold.it/887x898" alt="Beispielinhalt" class="img-responsive">
      </div>
    </div>
    <div class="clearfix visible-md-block visible-sm-block"></div>
    <div class="col-lg-3 col-sm-6 hidden-xs">
      <div class="imagecontainer">
        <img src="http://placehold.it/887x898" alt="Beispielinhalt" class="img-responsive">
      </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12 bgb fw">
      <div class="contentbox readmore flex-col">
        <h2>example</h2>
      </div>
      <div class="contentbox expand bgb flex-col">
        <span aria-hidden="true" class="pull-right closebox">×</span>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanct</p>
        <p><a href="#" class="btn btn-default">read more</a>
        </p>
      </div>
    </div>
  </div>
  <div class="row row-flex row-flex-wrap">
    <div class="col-lg-8 col-md-8 col-sm-6 hidden-xs">
      <div class="imagecontainer">
        <img src="http://placehold.it/1325x907" alt="Beispielinhalt" class="img-responsive">
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 bgp fw">
      <div class="contentbox readmore flex-col">
        <h2>example</h2>
      </div>
      <div class="contentbox expand bgp flex-col">
        <span aria-hidden="true" class="pull-right closebox">×</span>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanct</p>
        <p><a href="#" class="btn btn-default">read more</a>
        </p>
      </div>
    </div>
  </div>
  <div class="row row-flex row-flex-wrap">
    <div class="col-lg-3 col-sm-6 col-xs-12 fw">
      <div class="contentbox readmore bgr flex-col">
        <h2>example</h2>
      </div>
      <div class="contentbox expand bgr flex-col">
        <span aria-hidden="true" class="pull-right closebox">×</span>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanct</p>
        <p><a href="#" class="btn btn-default">read more</a>
        </p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6 hidden-xs">
      <div class="imagecontainer">
        <img src="http://placehold.it/887x898" alt="Beispielinhalt" class="img-responsive">
      </div>
    </div>
    <div class="clearfix visible-md-block visible-sm-block"></div>
    <div class="col-lg-3 col-sm-6 col-xs-12 bgb fw">
      <div class="contentbox readmore flex-col">
        <h2>example</h2>
      </div>
      <div class="contentbox expand bgb flex-col">
        <span aria-hidden="true" class="pull-right closebox">×</span>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanct</p>
        <p><a href="#" class="btn btn-default">read more</a>
        </p>
      </div>
    </div>
    <div class="col-lg-3 col-sm-6 hidden-xs">
      <div class="imagecontainer">
        <img src="http://placehold.it/887x898" alt="Beispielinhalt" class="img-responsive">
      </div>
    </div>
  </div>
</div>

引导层：http://www.bootply.com/UGEHVTvNXi

错误发生的地方：如果您调整 IE10/11/FF44.0.2 的大小，您将看到该错误。 cols 应该折叠，但它仅适用于 8er/4er-col-combo。如果该行包含 4x3 cols，即使添加了 clearfix，它也无法正常工作。

Answer 1

您只使用了 webkit 供应商前缀，firefox 不会使用该规则。 将 .row-flex-wrap 更改为以下内容，它应该可以工作。

.row-flex-wrap {
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      align-content: flex-start;
      flex: 0;
    }

最好的