css - 带有 css flexbox 的多行列

Question

我正在尝试制作一个由 5 个框 (div) 组成的网格，其中第一个框为纵向布局，其余框的高度为第一个框的一半(下面的屏幕截图)

我的 HTML 看起来像这样:

<div class="container">
<div class="row">
<div class="col-md-4 portrait"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>

使用 float:left 和 display block 会很容易，但我使用的是 bootstrap 4，它使用 flexbox，所以不支持 float left，我无法让它按预期工作。即使使用 flexbox 也有办法做到这一点吗？

PS: 行div有flex-wrap: wrap;

Answer 1

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: column;
  height: 200px;
  justify-content: flex-start;
  
}

.col-md-4 {
  flex: 0 0 50%;
  -webkit-flex: 0 0 50%;
  background: green;
}

.portrait {
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
  background: blue;
 }

.red {
  background: red;
}

<div class="container">
<div class="row">
<div class="col-md-4 portrait"></div>
<div class="col-md-4 red"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4 red"></div>
</div>
</div>