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

我想拉伸(stretch)分页容器，使用 flexbox CSS 将两个元素放在左侧，两个元素放在右侧。

"first"和 "last"不应改变大小，"prev"和 "next"理想情况下应保持相同大小，但可以拉伸(stretch)(同时内容应与 "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

在查看对齐选项和 this helpful answer 之后，我找到了一个非常简单的解决方案:

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

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