Flexbox单元格跨越2列和2行

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

您需要使用css grid来进行此类布局。它提供了更好的灵活性。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;