这种布局可以用 Flexbox 完成吗？答案

【问题标题】：Can this layout be done with Flexbox [duplicate]这种布局可以用 Flexbox 完成吗？
【发布时间】：2020-10-07 20:52:40
【问题描述】：

两列左列分成两行

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

这个的 CSS 是什么？形状我与flex-direction 斗争，但无法弄清楚

【问题讨论】：

一旦你需要同时考虑行和列，而不仅仅是一个或另一个，那么网格似乎就是要使用的一个，除非你是关于砌体布局，然后是砌体脚本或列 CSS。部分损坏的布局也可以完成这项工作。你能澄清一下黑色和红色的高度吗？黑色总是更高还是不高？布局是否必须拉伸并填充两列？等等...每种方法的行为都会有所不同，但是 flex 可以将其复制到像素上..这可能不是您所需要的；）
我对网格很熟悉，我的问题是更好地学习和理解 flex，我不会掌握它并找出边缘情况
flex 需要一个固定的高度来换行到下一列，grid 需要较高的元素跨越几行，损坏的able-layout 会将单元格扩展到块元素的高度，但不是另一边。 column CSS 将在设置的列数量内平衡内容。 ...每个都有一个目的 :) 一旦你很好地理解了它们，就更容易选择使用哪种方法。在这种情况下，至少你有一个关于 flex 的答案。玩得开心编码。我在下面的答案中有几个例子，你可以和他们一起玩；）

标签： css layout flexbox

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

【讨论】：