html - justify-content 属性未按预期工作

Question

我正在尝试将“上一页”向左对齐，将“下一页”向右对齐，并找出如何使页码居中。

我一直在查看有关 Flexbox 的教程和文章，但我很难理解它。

.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

您似乎想向一个方向或另一个方向“插入” flex 元素。为此，您应该使用 auto margins而不是 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>

剩余的 flex 元素将在第一个和最后一个之间居中，不一定相对于容器居中。如果您想要后者，可以使第一个和最后一个 flex 元素的宽度相同。

.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>