沿主軸線

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