具有CSS Flexbox的多行列

Question

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

我的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会很容易，但是我正在使用使用flexbox的bootstrap 4，因此不支持左浮动，而且我无法按预期工作。即使使用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>

Answer 2

您可以使用以下方法获得图像中显示的结果。

  <div class="container">
  <div class="row">
    <div class="col-md-6 portrait">PUT YOUR PORTRAIT CONTENT HERE</div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">TOP LEFT AFTER PORTRAIT</div>
        <div class="col-md-6">TOP RIGHT AFTER PORTRAIT</div>
      </div>
      <div class="row">
        <div class="col-md-6">BOTTOM LEFT AFTER PORTRAIT</div>
        <div class="col-md-6">BOTTOM RIGHT AFTER PORTRAIT</div>
      </div>
    </div>
  </div>
</div>

这是通过在col内部创建一个新行来完成的，而col在另一个行中本身。