html - 如何使用CSS Flexbox弯曲多个高度/尺寸的盒子(How to use CSS Flexbox to flex boxes of multiple heights/sizes)

Question

I'm trying to use CSS flexbox to design a grid with an image in one div that will take up the full length of the parent div and then have four divs that are in a 2x2 grid next to the div like the following:

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

I'm currently trying to build this out but keep running into issues handling creating the 2x2 grid next to div 1 because I can't get the grid to wrap to always appear as 2x2 nor get each of the divs within it to dynamically split the remaining of the page width based on the size of div 1.

(我目前正在尝试将其扩展，但是在处理div 1旁边创建2x2网格时会遇到一些问题，因为我无法将网格包装为始终显示为2x2，也无法获取其中的每个div来动态拆分页面剩余宽度基于div 1的大小。)

The code I'm currently working is as follows:

(我当前正在工作的代码如下：)

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

How can I reconstruct this grid to allow me to build something close to the first image I made?

(如何重建此网格以使我能够构建接近于我制作的第一张图像的东西？)

  ask by iPhoneApple translate from so

Answer 1

Maybe something along these lines?

(也许这些思路？)

NOTE: The solution is based only on Flexbox.

(注意：该解决方案仅基于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>