justify-content property is not working as expected - html

Question

I'm trying to align "Previous" to the left, align "Next" to the right, and figure out how to center the page numbers.
I've been looking at tutorials and articles on flexbox but I'm having a hard time understanding it.
.nav-links {
display: flex;
}
.prev.page-numbers {
justify-content: flex-start;
}
.next.page-numbers {
justify-content: flex-end;
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>

Answer 1

It seems you want to "push" flex items in one direction or another. To do that, you should use auto margins instead of justify-content.
.nav-links {
display: flex;
}
.prev.page-numbers {
margin-right: auto; /* Push to the left */
}
.next.page-numbers {
margin-left: auto; /* Push to the right */
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
The remaining flex items will be centered between the first and last ones, not necessarily centered relatively to the container. If you want the latter, you can make the first and last flex items be equally wide.
.nav-links {
display: flex;
}
.prev.page-numbers, .next.page-numbers {
flex: 1; /* Disttribute remaining space equally */
}
.next.page-numbers {
text-align: right;
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>

Answer 2

The justify-content property applies only to flex containers, although it aligns flex items.
In your code, because you're applying justify-content to flex items, it is being ignored.
Here are two working examples:
Example 1 - justify-content
.nav-links {
display: flex;
justify-content: space-between;
background-color: lightgray;
}
a {
flex: 0 0 10%;
text-align: center;
border: 1px solid black;
background-color: yellow;
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class=" page-numbers">1</a>
<a class="page-numbers">2</a>
<a class=" page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
Example 2 - auto margins
.nav-links {
display: flex;
background-color: lightgray;
}
a {
flex: 0 0 10%;
text-align: center;
border: 1px solid black;
background-color: yellow;
}
a:first-child { margin-right: auto; }
a:last-child { margin-left: auto; }
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class=" page-numbers">1</a>
<a class="page-numbers">2</a>
<a class=" page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
More details:
Methods for Aligning Flex Items along the Main Axis

Answer 3

justify-content only works in parents, not in children, so if you can wrap your .page-numbers then you just can simply set display:flex to parent and child div and flex:1 + justify-content to div child, which is parent of .page-numbers
div {
display: flex;
}
div div {
flex: 1;
justify-content: center
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<div>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
</div>
<a class="next page-numbers">Next</a>
</div>