将上一个/下一个导航链接与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; 
}