Question

我正在尝试使用下一个和上一个按钮进行简单的导航。前一个位于容器的最左侧，下一个位于最右侧。我知道你在想什么：这是使用justify-content: space-between的理想时间。但是，当用户在第一页或最后一页时，后端不会分别输出前一个和下一个按钮。这导致下一个按钮在第一页上左对齐，这不是我想要的。

我以为我可以对孩子们使用align-self。我现在遇到的问题是，第一个孩子推倒了第二个孩子，我不知道如何解决这个问题。

这是一个片段

＆＃13;

.container {
  display: flex;
}
.container * {
  width: 10%;
  height: 80px;
}
#d1 {
  background: green;
  align-self: flex-start;
}
#d2 {
  background: red;
  align-self: flex-end;
}

＆＃13;

<div class="container">
  <div id="d1">
    div 1
  </div>
  <div id="d2">
    div 2
  </div>
</div>

＆＃13;

Answer 1

我完全忘记了flex中的魔术边缘。这是：

.container {
  display: flex;
}
.container * {
  width: 10%;
  height: 80px;
}
#d1 {
  margin-right: auto;
  background: red;
}
#d2 {
  margin-left: auto;
  background: green;
}

<div class="container">
  <div id="d1">
    div 1
  </div>
  <div id="d2">
    div 2
  </div>
</div>

使用align-self将flex儿童放在彼此旁边

1 个答案: