100% total width for flex items in flex container, with gap inbetween-CodePudding

I am trying to position elements in a flexbox with flex-wrap with gap in between

Ideally the way this should be displayed is:

On the first row the blue box taking the full width no gaps anywhere
Second row Red box taking the first 33%, Green box taking the remaining 66%
There should be 12px gap between the 2 rows
There should be 12px gap between the Red and Green item without them going on the next row, so their widths should actually become 33% - 6px and 66% - 6px so that there is space left for the gap.

End result should look something like this:

.container {
 max-width: 200px;
 width: 200px;
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 padding: 0 12px 0 12px;
}

.item1 {
width:33%;
height: 200px;
background-color: red;
}

.item2 {
width:66%;
height: 200px;
background-color: green;
}

.item3 {
width: 100%;
height: 200px;
background-color: blue;
}

<div class="container">
  <div class="item3"></div>
  <div class="item1"></div>
  <div class="item2"></div>  
</div>

CodePudding user response：

I have added a flex-direction: row, Removed the padding and added a calc function to the widths as well as upped the 66% to 67% to create 100% total.

.container {
 max-width: 200px;
 width: 200px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 12px;
}

.item1 {
width: calc(33% - 6px);
height: 200px;
background-color: red;
}

.item2 {
width:calc(67% - 6px);
height: 200px;
background-color: green;
}

.item3 {
width: 100%;
height: 200px;
background-color: blue;
}

<div class="container">
  <div class="item3"></div>
  <div class="item1"></div>
  <div class="item2"></div>  
</div>

CodePudding user response：

You can use flex-basis and flex-grow instead of width. See the example below...

.container {
      max-width: 200px;
      width: 200px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 0 12px 0 12px;
    }

    .item1 {
      flex-basis: 33%;
      height: 200px;
      background-color: red;
    }

    .item2 {
      flex-basis: 60%; /* Reduce this value abit and allow to auto grow */
      flex-grow: 1; /* Last item will fill up the remaining space */
      height: 200px;
      background-color: green;
    }

    .item3 {
      flex-basis: 100%;
      height: 200px;
      background-color: blue;
    }

<div class="container">
      <div class="item3"></div>
      <div class="item1"></div>
      <div class="item2"></div>
    </div>

CodePudding user response：

This is @Ben variant but improve calculations

.container {
  --gap: 12px;
  max-width: 200px;
  width: 200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap); // better use like veriable, you can edit it one time in all plays together
}

.item {
  height: 200px; // we have pattern, we don't need repeat it
}

.item1 {
  width: calc(33.33% - var(--gap) / 2); // improve calculation
  background-color: red;
}

.item2 {
  width: calc(66.66% - var(--gap) / 2);// improve calculation
  background-color: green;
}

.item3 {
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="item item3"></div>
  <div class="item item1"></div>
  <div class="item item2"></div>
</div>

CodePudding user response：

This a CSS grid use case where you don't need a lot of code and headaches:

.container {
  max-width: 200px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows:200px;
  gap: 12px;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: green;
}

.item3 {
  grid-column: 1/-1;
  background-color: blue;
}

<div class="container">
  <div class="item3"></div>
  <div class="item1"></div>
  <div class="item2"></div>
</div>