Align flex items in rows using specified spacing

Question

I have two rows containing <div>, each row has display: flex;, each row contains several sub<div> ;project. In the example below, you can see that there are 2 items in the first row (the green box labeled "item") and their ratio is 6/3. In the second row there are 4 items and their proportion is 2/2/2/3.

Now I want the last item in each row (with flex: 3;) to be perfectly aligned unless I add a gap: X px;.

---

How do I include this gap in the calculation so that items with the same width align according to their flex property? Or simplify it graphically in the following code snippet: How do I align the red border?

.flex {
  height: 50px;
  display: flex;
  gap: 20px; // <- 破坏我的布局的罪魁祸首
}

.item {
  background-color: green;
  outline: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-2 {
  flex: 2;
}

.item-3 {
  flex: 3;
}

.item-6 {
  flex: 6;
}

<div>
  <div class="flex">
    <div class="item item-6" style="border-right: 2px solid red;">item</div>
    <div class="item item-3">item</div>
  </div>
  <div class="flex">
    <div class="item item-2">item</div>
    <div class="item item-2">item</div>
    <div class="item item-2" style="border-right: 2px solid red;">item</div>
    <div class="item item-3">item</div>
  </div>
</div>

Answer 1

One of the many possible solutions is to wrap some items in another flex div.
See the code below, which contains class flex-item:

<div>
  <div class="flex">
    <div class="item item-6" style="border-right: 2px solid red;">item</div>
    <div class="item item-3">item</div>
  </div>
  <div class="flex">
    <div class="flex-item item-6 white">
      <div class="item item-2">item</div>
      <div class="item item-2">item</div>
      <div class="item item-2" style="border-right: 2px solid red;">item</div>
    </div>
    <div class="item item-3">item</div>
  </div>
</div>

.flex {
  height: 50px;
  display: flex;
  gap: 20px; // <- 破坏我的布局的罪魁祸首
}

.item {
  background-color: green;
  outline: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-2 {
  flex: 2;
}

.item-3 {
  flex: 3;
}

.item-6 {
  flex: 6;
}

.flex-item {
  display: flex;
  gap: 20px;
  justify-content: center;
}