带有 css flexbox 的多行列答案

【问题标题】：Multirow column with css flexbox带有 css flexbox 的多行列
【发布时间】：2019-04-18 16:14:43
【问题描述】：

我正在尝试制作一个由 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 和显示块会很容易，但我使用的是使用 flexbox 的 bootstrap 4，因此不支持 float left，我无法让它按预期工作。即使使用 flexbox 也有办法做到这一点吗？

PS: 行 div 有 flex-wrap: wrap;

【问题讨论】：

虽然还有其他解决方案，但您可以使用两个网格 - 顶部的一个有两列，第二个有两行和两列。
这会使我的 php 复杂化，因为这应该使用 PHP 循环来呈现。并且将是更多的行和列..
几乎相似：jsfiddle.net/aq9Laaew/272327
@Badr 使用 PHP 或 JS 将您的集合分组为子集合，并将您的循环单独放置在嵌套行中。这是推荐的带有 flex 的 html 结构。
谢谢大家。 @PatrikValkovič 你的 jsfiddle 中的代码最接近我的需要，所以我会使用它（y）。

标签： css flexbox bootstrap-4

【解决方案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>

【讨论】：

请注意，这仅适用于列的固定高度。

【解决方案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 内创建一个新行来完成的，该行本身位于另一行内。

【讨论】：