更改特定项目沿主轴的对齐方式

Question

鉴于以下结构：

<header>
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
  <button>Fourth</button>
  <button>Fifth</button>
</header>

有没有办法让最后三个按钮与flex容器的main-end对齐？我的理解是根据这个图表：

我已尝试过以下操作，但它会沿横轴而不是主轴对齐项目：

header {
  width: 100%;
  display: flex;
  flex-direction: row;
}
header button:nth-of-type(n+3) {
  align-self: flex-end;
}

main-end不是align-self的有效值，但这是我想要实现的效果。这可能没有任何额外的dom结构吗？

良好衡量标准所需效果的ASCII图：

+---------------------------------------------------------------------------------------+
|-------------------+                                          +------------------------|
||        ||        |                                          |      ||       ||      ||
||        ||        |                                          |      ||       ||      ||
||        ||        |                                          |      ||       ||      ||
|-------------------+                                          +------------------------|
+---------------------------------------------------------------------------------------+

编辑：如果可能的话，我宁愿避免花车。

Answer 1

您可以使用以下内容将最后三个与auto margins对齐：

header button:nth-of-type(2) {
    margin-right: auto;
}

Updated fiddle