使用flexbox阻止下一行占用上一行中最高项目的高度？

Question

我使用由2列组成的flexbox进行了布局。当一切都是相同的高度，它工作正常：

https://codepen.io/anon/pen/rJZeJm

<div class="cont">
  <div class="a">
    A
  </div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

* {
  box-sizing: border-box;  
}

.cont {
  width: 400px;
  background: gold;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.a,
.b,
.c {
  width: 45%;
  padding: 10px;
}

.a {
  background: red;
}

.b {
  background: blue;
  color: white;
}

.c {
  background: orange;
}

然而实际上div.b可能比div.a更高，但我不希望div.a的高度或div.c的位置改变：

https://codepen.io/anon/pen/KQxzoz

<div class="cont">
  <div class="a">
    A
  </div>
  <div class="b">
    B
    <br>
    More B
  </div>
  <div class="c">C</div>
</div>

我可以使用flexbox实现所需的布局吗？我确定网格可以做到这一点，但我不愿意使用它，因为它仍然没有在IE中得到适当的支持。

Answer 1

Flexbox不能以灵活的方式自行完成。

正如你自己提到的，CSS Grid可以做到这一点，虽然你不想这样做，但这个建议是基于你在较窄的屏幕上希望b位于底部的假设。

最初只需使用float，然后在某个断点处，在float和display: flex之间切换，就可以轻松利用这两者。

此外，使用Flexbox的order属性，可以轻松地按任意顺序定位元素，并使用此避免脚本并获得合理级别的浏览器支持。

Updated codepen

Stack snippet

* {
  box-sizing: border-box;  
}

.cont {
  background: gold;
  overflow: hidden;
}

.a,
.b,
.c {
  width: 45%;
  padding: 10px;
  float: left;
}

.a {
  background: red;
}

.b {
  background: blue;
  color: white;
  float: right;
}

.c {
  background: orange;
}

@media (max-width: 500px) {
  .a,
  .b,
  .c {
    width: auto;
    float: none;
  }
  .b {
    order: 1;
  }
  .cont {
    display: flex;
    flex-direction: column;
  }
}

<div class="cont">
  <div class="a">
    A
  </div>
  <div class="b">
    B
    <br>
    More B
  </div>
  <div class="c">C</div>
</div>