沿主轴线

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