弹性框对齐内容，主轴中心居中，最后一个弹性项目除外

Question

我的伸缩盒中有三个伸缩项目。我希望前两个居中，最后一个居中沿主轴一直向右对齐。

真正的基本概述：

<div class="flex flex-center">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div style="margin-left: auto;">flex item 3</div>
</div>

我的flex类的CSS是：

.flex {
  display: flex;

  &.flex-center {
    align-items: center;
  }
}

当我使用margin-left: auto;时会发生什么，就是它将前两个flex项目推到主轴的flex起点。我希望前两个弹性项目居中，而第三个项目始终与主轴的右端对齐。

Answer 1

听起来像您只需要做一点数学，然后使用last-child选择器。看看my pen here并告诉我这是否是您所需要的。

编辑：我现在认为最好的方法是使用一些隐藏的spacer元素和flex-grow属性。 Example here。