使用混合设计显示flex [重复]

Question

这个问题在这里已有答案：

• CSS-only masonry layout 2回答
• Flex box masonry in one flex-container 1回答

使用flexbox进行以下操作的最佳方法是什么？我希望2行是相等宽度的列，但是，最后一列是100％高度并填充该部分的其余部分。

为此最好使用多行吗？

.row {
  display: flex;
  flex-wrap: wrap-reverse;
}

.col {display:1;width:30%;background:red;}

.col:nth-of-type(3) {background:blue;}

<div class="row">
  <div class="col">
  test
  </div>
  <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
</div>

Answer 1

这是使用CSS grid layout的解决方案：

1. 使用row将display: grid定义为网格容器。
2. 使用grid-template-columns: repeat(3, 1fr)定义3列布局
3. 使用grid-template-rows: repeat(2, 1fr)定义2列布局
4. 使用grid-row: span 2将第三列跨越所有行。
5. 使用grid-gap属性调整行和列之间的间隙。

见下面的演示：

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
  grid-gap: 10px; /* gap between the rows & columns */
}
.col {
  background: red;
}
.col:nth-of-type(3) {
  background: blue;
  grid-row: span 2; /* span all the rows */
}

<div class="row">
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
</div>