justify-content属性未按预期工作

Question

我试图调整＆＃34;上一个＆＃34;在左边，对齐＆＃34;下一步＆＃34;在右边，并弄清楚如何使页码居中。

我一直在关注flexbox的教程和文章，但我很难理解它。

＆＃13;

＆＃13;

.nav-links {
  display: flex;
}
.prev.page-numbers {
  justify-content: flex-start;
}
.next.page-numbers {
  justify-content: flex-end;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您似乎想要在一个方向或另一个方向上“推动”弹性项目。为此，您应使用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>

剩余的弹性项目将在第一个和最后一个之间居中，不一定相对于容器居中。如果你想要后者，你可以使第一个和最后一个弹性项目同样宽。

.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

justify-content属性仅适用于Flex容器，但它会对齐flex项目。

在您的代码中，由于您正在应用justify-content来展示项目，因此会被忽略。

以下是两个有效的例子：

示例1 - justify-content

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

示例2 - auto页边距

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更多详情：

• Methods for Aligning Flex Items along the Main Axis

Answer 3

justify-content仅适用于父母，而不适用于儿童，因此如果您可以将.page-numbers换行，那么您只需将display:flex设置为父母和子女div和{ {1}} + flex:1至justify-content子女，即div

的父

＆＃13;

＆＃13;

.page-numbers

＆＃13;

div {
  display: flex;
}
div div {
  flex: 1;
  justify-content: center
}

＆＃13;

＆＃13;

＆＃13;