將上一個/下一個導航鏈接與flexbox對齊？

Question

考慮下面的HTML：

<nav class="pagination"> 
    <a href="#first" class="first">&lt;&lt;</a> 
    <a href="#prev" class="prev">&lt;</a> 
    <a href="#next" class="next">&gt;</a> 
    <a href="#last" class="last">&gt;&gt;</a> 
</nav> 

我想舒展分頁容器，並把左側的兩個項目和兩個項目的右側，使用Flexbox的CSS。

「第一」和「最後」不應該改變大小，理想情況下，「先前」和「下一個」應該保持相同的大小，但可以伸展（儘管內容應該保持與「第一」和「最後」 ）。

我試過下面的CSS，但它不會導致預期的結果：

pagination { 
    display: flex; 
    justify-content: space-between; 
} 

.pagination .first, 
.pagination .prev 
{ 
    align-self: flex-start; 
    text-align: left; 
} 

.pagination .next, 
.pagination .last 
{ 
    align-self: flex-end; 
} 

Answer 1

尋找到對齊選項和this helpful answer後，我發現了一個很簡單的解決方案：

pagination { 
    display: flex; 
    justify-content: flex-end; 
} 

.pagination .prev 
{ 
    margin-right: auto; 
}