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

Posted 2023-03-07

【中文标题】如何在屏幕末尾开始 flex-wrap 并继续全宽？

【英文标题】：How to start flex-wrap at the end of screen and continue with full width?

【发布时间】：2021-06-06 03:25:51

【问题描述】：

我正在尝试使用 flexbox 实现在下方绘制的布局。我想在图像 div 旁边启动 flexbox，然后使用屏幕的整个宽度进行 flex-wrap。

目前我有以下结果：带有项目的弹性框从下一行开始，因此图像 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="#" >
</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>

【问题讨论】：

将图片放入flexbox有什么问题？

目前我的所有弹性项目都从下一行开始，因此我的图像 div 旁边有一个空白

请在您的问题中包含您的代码。粗黑边框是弹性盒子容器吗？在这种情况下，您也可以将图像设为弹性项目，并为其赋予更大的flex-grow 属性。但说实话，你的布局看起来更像css grid。

@Kokodoko 请查看更新后的帖子，其中我提供了一些代码。粗边框只是为了显示屏幕的全宽

【参考方案1】：

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

    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="#" >
    </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>

【讨论】：

谢谢！据我了解，它归结为两个选项：将图像 div 放在 flex 容器中或使用 css 网格。我决定将图像 div 放入 flex 容器中。