Flexbox问题 - Firefox和IE10 / 11

Question

我没有在flex-markup中遇到问题，我得到了一个小的瓷砖风格的布局（使用bootstrap，我添加了flex-row-classes）。

在chrome，safari，opera，甚至在移动设备上，它的工作方式应该如此。除了IE10 / 11和当前的Firefox（44.0.2）。

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

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

提前谢谢你！

代码：

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

bootply：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;
    }

最佳