如何在屏幕末尾开始flex-wrap并继续全宽？

Question

我正在尝试实现用flexbox绘制的布局。我想在image div旁边启动flexbox，然后使用屏幕的整个宽度进行折叠。

​

​

目前我得到的结果如下:包含项目的flexbox从下一行开始，因此在image div旁边有一个空白区域。Flex-wrap: row在一行中放置了3个项目。

如何才能最好地实现上图中描述的布局？

​

body {
  width: 100vw;
}

.image-component, img {
  width:60vw;
  height: 200px;
}

.flexbox-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 30vw;
  height: 200px;
  background-color: green;
  text-align: center;
  box-sizing: border-box;
  margin: 10px;
}

<div class="image-component">
  <img src="#" alt="">
</div>
<div class="flexbox-container">
  <div class="flex-1 item">A</div>
    <div class="flex-2 item">B</div>
    <div class="flex-3 item">C</div>
    <div class="flex-4 item">D</div>
</div>

​

Answer 1

如果你把image-component放在flexbox-container中，我认为它应该是工作的。但最好的方法是使用css网格:)

    body {
  width: 100vw;
}

.image-component, img {
  width:60vw;
  height: 200px;
}

.flexbox-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 30vw;
  height: 200px;
  background-color: green;
  text-align: center;
  box-sizing: border-box;
  margin: 10px;
}



 <div class="flexbox-container">
      <div class="image-component">
      <img src="#" alt="">
    </div>
      
      <div class="flex-1 item">A</div>
        <div class="flex-2 item">B</div>
        <div class="flex-3 item">C</div>
        <div class="flex-4 item">D</div>
    
      
    </div>