Changing the alignment of individual elements along the main axis

Given the following structure:

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

      

        
        
        
      

    

Is there a way to get the last three buttons to align from the main-end

flex container? My understanding according to this 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 this is the effect I want to achieve. Is this possible without the extra dom structure?

ASCII chart of desired effect for good measure:

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

      

        
        
        
      

    

Edit: I'd rather avoid floats if at all possible.