下面是兩行。

第一行是彈性域1的兩個項目和彈性域2的一個項目。

第二行是flex 1中的兩個項目。

根據規范，1A + 1B = 2A

但是，當計算中包括填充時，總和是不正確的，正如您在下面的示例中看到的那樣。

問題

如何讓flex box在其計算中包含填充，從而使示例中的框正確對齊？

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

解決方案是:

在子元素上設置邊距，而不是在flex項上設置填充。

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

如何讓flexbox在計算中包含填充？

在您的代碼中，填充包含在計算中。

根據規范，1A + 1B = 2A

我不相信這是正確的。也許提供一個解釋的鏈接參考。

flex-grow屬性 當您將flex: 1應用于一個元素時，您使用flex速記屬性來說明:

彈性增長:1 伸縮:1 彈性基礎:0 flex-grow告訴flex項消耗容器中的可用空間。

以下是您的代碼:

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

在第一行中，padding-right: 10px應用于三個flex項目。

在第二行中，padding-right: 10px應用于兩個flex項目。

因此，在第一行中，少了10px的自由空間可以分配。這會破壞網格的對齊。

為了分配空間(例如，您希望元素占據容器的剩余高度或寬度)，請使用flex-grow。

要精確調整伸縮項目的大小，請使用伸縮基準、寬度或高度。

以下是更多信息:

彈性增長未按預期調整彈性項目 flex-grow如何與flexbox協同工作？ 默認情況下，使用flexbox時，padding屬性不包括在元素的寬度或高度的計算中。若要在計算中包括填充，可以將框大小屬性設置為border-box。

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
  box-sizing: border-box; // Add this line
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}

我不確定我是否遵循了公認的答案。嵌套的flex容器似乎與問題無關。如果運行示例時不顯示:flex開著。項，問題仍然存在。

這里的問題似乎是flex-grow只計算了在考慮了累積水平填充后它可以占用的可用空間。

讓我們假設頂層的flex容器是300像素寬。

第一行的可用空間:300像素-30像素填充= 270像素

該行中的彈性項目的彈性增長為1、1和2，總共4個單位。270/4 = 67.5像素。因此，1A和1B的內容框各為67.5像素，1C的內容框為135像素。

第二行的可用空間:300像素-20像素填充= 280像素

在這一行中，2A和2B的彈性增長都是1。280/2 = 140像素。

因此，1A和1B將有一個67.5像素+10像素水平填充的內容框，使它們的總寬度分別為77.5像素。

2A將有一個140px + 10px水平填充的內容框，使其總寬度為150px。

77.5px + 77.5px ≠ 150px。換句話說，1A + 1B ≠ 2A，這就是他們沒有排隊的原因。

公認的答案確實解決了這個問題，但是CSS grid自從這個答案被提交以來已經得到了很好的支持，并且是目前解決這個問題的更慣用的方法。

.Row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.Item:nth-child(n + 3) {
  grid-column: span 2;
}

.Item > div{
  background:#7ae;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item">
    <div>1C</div>
  </div>
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

您可以在flex子元素中添加包裝元素。給予該元素填充不會影響根flex元素的寬度/高度。

<div style='display: flex;'>
  <div>
    <div style='padding: 10px;'>
      <-- your other elements  -->
     </div>
  </div>
</div>

您可以使用浮動偽塊元素來代替填充，如下所示: (本例中為30px右填充)

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}