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

Question

给定以下结构：

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

有没有办法让最后三个按钮与弹性容器的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