跨 2 列和 2 行的 Flexbox 单元格

Question

我想知道这是否可以仅使用 flexbox 来完成，或者我是否还需要合并网格功能。我试图让特定的单元格跨越多行和多列。我是我的独特案例，它只是第一个框需要与它下方的 2 个框具有相同的宽度，并且与它右侧的两个框具有相同的高度。

这是我最初尝试的代码笔，我明白为什么它不起作用。只是想知道是否有办法得到这个：

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 31.58585%;
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

.highlight {
  flex-basis: 65.9%;
}

<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

进入这个：

Answer 1

您需要使用 cssgrid来实现这种类型的布局。它提供了更好的灵活性。

#container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.box{
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  text-align: center;
}

.highlight{
  grid-column: 1 / 3;
  /* grid-column: span 2; same as above */
  grid-row: 1/3;
}

<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>