html - Flexbox 在 IE 10 中不工作

Question

嘿，我在画廊上使用 flexbox 网格让第一个 div 占据 2 列并使其全部响应。 它在 IE10 中一切正常 Flexbox 变得疯狂并且 2 Column Div 变得超大，我不明白为什么。

http://codepen.io/HendrikEng/pen/wzRQNJ

CSS:

.c-showcase {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
.c-showcase::after {
  clear: both;
  content: '';
  display: table;
}

.c-showcase-quote {
  width: 50%;
  float: left;
}

.c-showcase-item {
  width: 25%;
  float: left;
}
.c-showcase-item::after {
  clear: both;
  content: '';
  display: table;
}

.c-showcase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.c-showcase-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

img {
  display: block;
  height: auto;
  width: 100%;
}

.c-showcase-quote {
  background: black;
  color: white;
}

HTML:

<div class="c-showcase">
  <div class="c-showcase-block">
    <div class="c-showcase-quote">
      <h2 class="c-showcase-quote__title c-showcase-quote__title_outline_black">BLA BLA BLA</h2>
      <p class="c-showcase-quote__content">blablalbl</p>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
  </div>
</div>

Answer 1

你不需要 float:left; 在 flex children 上。那是盒子模型。您可能想要的是:

.c-showcase-block {
  display: flex;
  flex-wrap: wrap;
}
.c-showcase-quote {
  flex: 0 0 50%;
}
.c-showcase-item {
  flex: 0 0 25%;
}

此处为前缀版本:

.c-showcase-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.c-showcase-quote {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}
.c-showcase-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

如果您不想在所有宽度上应用它，请将其包裹在媒体查询中。 flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，按顺序排列。