可以使用Flexbox完成此布局吗

Question

左列的两列分为两行

<div class="parent">
<div class="black"></div>
<div class="red"></div>
<div class="orange"></div>
</div>

什么是CSS？形状让我在flex-direction中挣扎，但无法解决

Answer 1

这是我评论过的几个选项：

一旦要同时考虑行和列，而不仅仅是一个或另一个，那么网格似乎是要使用的网格，除非您是关于砌体布局，然后是砌体脚本或CSS列。局部损坏的布局也可以完成这项工作。您能说明一下黑色和红色的高度吗？黑色总是更高或更高？布局是否必须拉伸并填充两列？等等...每种方法的行为都不同，但是flex可以将其重现为像素..这可能不是您所需要的;）

一个或另一个可以满足您的需求，重要的是，当实际内容填充这些框时，您最终希望发生什么；）

* {
  margin: 0;
}

body>div {
  margin: 0.25em;
}

.parent {
  vertical-align: top;
  display: inline-grid;
  grid-template-columns: 219px 259px;
  min-height: 304px;
  border: solid white 18px;
}

.orange {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.red {
  grid-column: 1;
  min-height: 84px;
}

.parent.bis {
  display: inline-table;
  width: 478px;
  border-collapse: collapse;
}

.parent.bis .orange {
  display: table-cell;
  width: 259px;
}

.parent.ter {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 304px;
  width: 478px;
}

.parent.ter .orange,
.column2 .orange {
  width: 259px;
  height: 304px;
}

.column2 {
  column-count: 2;
  width: 478px;
  gap: 0;
  column-gap: 0px;
  border: solid white 18px;
}

.orange {
  background: #e09234;
  min-height: 100%;
}

.red {
  background: #df270d;
  grid-column: 1;
  width: 219px;
}

.black {
  background: #030202;
  min-height: 219px;
  width: 220px;
}

body {
  background: #444;
  margin: 0;
  padding: 1em;
}

<div class="parent">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>
<div class="parent bis">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>


<div class="parent ter ">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>


<div class="column2">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>