Flex框对齐-除了最后一个flex项目外，中心是主轴上的内容。

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选择器。看看我的笔在这里，告诉我这是否是您所需要的。

编辑：--我现在认为最好的方法是使用一些隐藏的间隔元素和flex-grow属性。这里的例子。