将上一个/下一个导航链接与 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 拉伸分页容器，并在左侧放置两个项目，在右侧放置两个项目。

“first”和“last”不应改变大小，“prev”和“next”理想情况下应保持相同大小，但可能会拉伸（而内容应与“first”和“last”保持紧密接近）。

我已经尝试了以下 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

在研究了对齐选项和这个有用的答案之后，我找到了一个非常简单的解决方案：

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

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