如何将两个项目并排与一个项目并排对齐[重复]答案

【问题标题】：How to align two items side by side along with one item side along [duplicate]如何将两个项目并排与一个项目并排对齐[重复]
【发布时间】：2021-01-30 13:36:41
【问题描述】：

使用以下标记，我希望使用 flex 系统（不使用网格）来获得下面附加的布局，并且不更改标记结构。

HTML：

<div class="container">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="box box-5">item5</div>
  <div class="box box-6">item6</div>
</div>

【问题讨论】：

使用网格区域，它们非常适合这个。
使用四列网格

标签： html css angular flexbox css-grid

【解决方案1】：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-gap: 20px;
}

.box {
  background-color: red;
  padding: 20px;
  &-2 {
    grid-row-end: span 5;
  }
}

<div class="grid">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="box box-5">item5</div>
  <div style="display:flex;">
    <div class="box" style="flex-grow: 1;">item6</div>
    <div class="box" style="flex-grow: 1;">item7</div>
  </div>
</div>

【讨论】：

【解决方案2】：

检查一下：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}

.box {
  background-color: red;
  padding: 20px;
}

.box-2 {
  grid-row-end: span 4;
}

.tempBox{
  grid-template-columns: auto auto;
}

<div class="grid">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="grid tempBox">
    <div class="box box-6">item5</div>
    <div class="box box-7">item6</div>
  </div>
</div>

【讨论】：

请回答更新后的问题
@KrishnaChaitanya 我已经更新了答案。看看:)
在我的场景中，我无法更改我的标记结构。所有项目都应该是彼此的兄弟姐妹。请看一下