中心的第一项和最后的第二项[flex]

Question

这个问题在这里已有答案：

• How to horizontally center a <div>? 96回答

我猜是很常见的问题，但找不到任何解决方法来解决它。

代码是：

<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

应该是这样的：

first-item将在中间，second-item应该在最后。

我尝试过的：

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  align-self: flex-end;
}

我如何使用flex或css的任何其他方式实现它？

Answer 1

你可以试试，

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  right: 0;
  position: absolute;
}

<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

Answer 2

几乎：你只需要在第一个元素上添加一个边距auto

.container {
  display: flex;
  justify-content: center;
}

.first-item {
  margin: auto;
}
.second-item {
  align-self: flex-end;
}

Codepen demo