Jajarkan item fleksibel dalam baris menggunakan jarak yang ditentukan

Question

Saya ada dua termasuk<div>的行，每行都有display: flex;，每个行中都包含几个子<div>项目。在下面的示例中，您可以看到在第一行中有2个项目（绿色的盒子标记为“item”），它们的比例为6/3。在第二行中有4个项目，它们的比例为2/2/2/3.

Sekarang, saya mahu item terakhir dalam setiap baris (mempunyai flex: 3;）能够完美对齐，除非我添加一个gap: X px;.

---

Bagaimana cara saya memasukkan gap，以便具有相同宽度的项目根据它们的flexpenjajaran hartanah ini dalam pengiraan? Atau permudahkan secara grafik dalam coretan kod berikut: Bagaimanakah cara saya menjajarkan sempadan merah?

.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

Salah satu daripada banyak penyelesaian yang mungkin adalah dengan membungkus beberapa item dalam div fleksibel yang lain.
Lihat kod di bawah yang mengandungi kelas 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;
}