使用指定間隔對行中的flex項目進行對齊

Question

我有兩個包含<div>的行，每行都有display: flex;，每個行都包含幾個子<div> ;專案.在下面的範例中，您可以看到在第一行中有2個項目（綠色的盒子標記為「item」），它們的比例為6/3。在第二行有4個項目，它們的比例為2/2/2/3。

現在，我希望每行中的最後一個項目（具有flex: 3;）能夠完美對齊，除非我添加一個gap: X px;。

---

我如何在計算中包含這個gap，以便具有相同寬度的項目根據它們的flex屬性對齊？ 或在下面的程式碼片段中以圖形方式簡化：我如何對齊紅色邊框？

.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

多種可能的解決方案之一是在另一個彈性div中包裹一些項目。
請參閱下面的程式碼，其中包含類別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;
}