Align previous/next navigation links with flexbox?

Question

Given the following 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>

I'd like to stretch the pagination container and put two items on the left side and two items on the right side, using flexbox CSS.

"first" and "last" should not change size, "prev" and "next" should ideally stay the same size, but may stretch (while the content should keep close proximity to "first" and "last" respect).

I've tried the following CSS but it does not lead to the desired result:

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

After looking into the alignment options and this helpful answer, I found a very simple solution:

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

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