Changing alignment of specific items along the main axis

Problem

Given the following structure:

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

Is there any way to get the last three buttons to align themselves to the main-end of the flex container? My understanding is according to this diagram:

Flexbox Diagram

I've tried the following, but it aligns items along the cross axis instead of the main axis:

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

main-end is not a valid value for align-self, but that is the effect I want to achieve. Is this possible without any additional dom structure?

ASCII diagram of the desired effect for good measure:

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

Edit: I would prefer to avoid floats if at all possible.

Problem courtesy of: KPthunder

Solution

You can align the last three with auto margins by using:

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

Updated fiddle

Solution courtesy of: Adrift

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.