小编TTa*_*TTa的帖子

跨 2 列和 2 行的 Flexbox 单元格

我想知道这是否可以仅使用 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%;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

进入这个：