html - 如何使用 CSS Flexbox 来伸缩多个高度/尺寸的盒子

Question

我正在尝试使用 CSS flexbox 设计一个网格，其中一个 div 中有一个图像，它将占据父 div 的整个长度，然后在 div 旁边的 2x2 网格中有四个 div，如下所示:

我目前正在尝试构建它，但在处理在 div 1 旁边创建 2x2 网格时一直遇到问题，因为我无法让网格始终显示为 2x2，也无法让其中的每个 div 显示根据 div 1 的大小动态拆分剩余的页面宽度。

我目前正在处理的代码如下:

#intro-section {
    padding-top: 16px;
    padding-left: 32px;
    display: inline;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 300px;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

#img-box {
    height: 200px;
    width: 200px;
   background-color: #f1f1f1;
  margin: 32px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  display: inline;
}

<div id="intro-section">
  <div class="flex-container">
    <div id="img-box">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

我怎样才能重建这个网格以允许我构建一些接近我制作的第一张图像的东西？

Answer 1

也许是沿着这些思路？

注意:该解决方案仅基于 Flexbox。

* {
  box-sizing: border-box;
}
#intro-section {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: calc(50% - 20px);
  margin: 10px;
  height: 100px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

#img-box {
 height: 200px;
 width: 200px;
 background-color: #f1f1f1;
 margin: 16px;
 text-align: center;
 line-height: 75px;
 font-size: 30px;
}

<div id="intro-section"> 
    <div id="img-box">1</div>
    <div class="flex-container">
      <div>2</div>
      <div>3</div>  
      <div>4</div>
      <div>5</div> 
  </div> 
</div>