css - 这个布局可以用 Flexbox 完成吗

Question

两列左列拆分为两行

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

这将是什么CSS？形状我挣扎flex-direction但无法弄清楚

标签： csslayoutflexbox

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>