具有混合设计的显示柔性 [重复]

Question

用 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. 使用display: grid 将row 定义为网格容器。
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>