解决方案：
在子元素上设置margin，而不是在flex项上设置padding。

.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>

问题是：
在没有padding的情况下进行计算。将padding添加到flex元素并没有通过spec提供预期的宽度。
具体条款
例如，浮动的自动调整大小的Flex容器中Flex项的可用空间为：

• Flex容器的包含块的宽度减去Flex容器在水平维度上的边距、边框和填充
• 垂直方向无限大

为什么不计算填充呢？这是规格要求的。

• 确定flex项的可用main和cross空间 .对于每个维度，如果flex container的内容框的维度是确定的大小，则使用该维度;如果在min或max-content约束下确定flex container的维度的大小，则该维度中的可用空间是该约束;否则，从该维度中Flex容器的可用空间中减去Flex容器的边距、边框和填充，并使用该值。 这可能导致无穷大的值。*

如果从元素大小中减去padding和margin，则得到：

• • 1A +1B = 2A**

然而，在你这样做之后，填充被添加到元素中。元素越多，填充就越多。这没有在宽度中计算，导致你的语句为假。

如何让flexbox在计算中包含填充？
在您的代码中，计算中包含填充 *。
根据质量标准1A +1B = 2A
我不认为这是正确的。也许提供一个链接参考的解释。

flex-grow属性

将flex: 1应用于元素时，使用flex简写属性表示以下内容：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

flex-grow告知弹性项目消耗容器中的可用空间。
下面是您的代码：

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

在第一行中，padding-right: 10px应用于三个弹性项目。
在第二行中，padding-right: 10px应用于两个弹性项目。
因此，在第一行中要分配的可用空间少了10px，这破坏了网格的对齐。
对于分配空间（例如，您希望元素占用容器的剩余高度或宽度），请使用flex-grow。
要精确调整弹性项目的大小，请使用flex-basis、width或height。
下面是一些更多的信息：

• flex-grow not sizing flex items as expected
• How exactly does flex-grow work with flexbox?

我不确定我是否遵循了公认的答案。嵌套的flex容器似乎与问题无关。如果您在.Item上运行没有display: flex;的示例，问题仍然存在。
这里的问题似乎是flex-grow只计算在考虑累积水平填充之后它可以占用的可用空间。
让我们假设顶层flex容器的宽度为300px。

• • 第一行的可用空间**：300像素-30像素填充= 270像素

该行中的flex项的flex-grow为1、1和2，总共4个单位。270/4 = 67.5px。因此，1A和1B的内容框各为67.5px，1C的内容框为135px。

• • 第二行的可用空间**：300像素-20像素填充= 280像素

在这一行中，2A和2B的flex-grow都为1。280/2 = 140px。
因此，图1A和图1B的内容框的水平填充为67.5px +10px，总宽度为77.5px。
2A将具有140px +10px水平填充的内容框，使其总宽度为150px。
77.5px +77.5px ≠ 150px，换句话说，1A +1B ≠ 2A，这就是它们不排队的原因。
公认的答案确实解决了这个问题，但是自从这个答案被提交以来，CSS网格已经得到了很好的支持，并且是当今解决这个问题的更惯用的方法。

.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>

默认情况下，使用弹性框时，元素宽度或高度的计算中不包括填充属性。要在计算中包括填充，可以将box-sizing属性设置为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;
}

可以使用浮动伪块元素代替填充，如下所示：（本例中为30px右填充）

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