Darren Bachan Darren Bachan - 6 months ago 10
CSS Question

justify-content property is not working as expected

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

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:

Comments