html - 使用 align-self 将 flex 子节点放置在彼此旁边

Question

我正在尝试使用下一个和上一个按钮制作一个简单的导航。 Previous 在容器的最左边，next 在最右边。我知道您在想什么:这是使用 justify-content: space-between 的理想时机。但是，当用户在第一页或最后一页时，后端不会分别输出上一个和下一个按钮。这会导致下一个按钮在第一页上左对齐，这不是我想要的。

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

这是一个片段

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

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

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>