How to start flex-wrap at the end of screen and continue with full width?

I’m trying to achieve the layout drawed beneath with flexbox. I want to start the flexbox next to the image div and then flex-wrap into using the full width of the screen.

desired flexbox layout

Currently I have the following result: The flexbox with the items are starting on the next line, so that there is a white space next to the image div. Flex-wrap: row is placing 3 items on a row though.

How can I best achieve layout described in the image above?

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

If you put image-component in the flexbox-container I think it should be work. But best way to do this use 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="#" 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>

Leave a Reply

Your email address will not be published. Required fields are marked *